下拉选中

import TextField from '@material-ui/core/TextField';
import MenuItem from '@material-ui/core/MenuItem';

const currencies = [
    {
      value: 'USD',
      label: '$',
    },
    {
      value: 'EUR',
      label: '€',
    },
    {
      value: 'BTC',
      label: '฿',
    },
    {
      value: 'JPY',
      label: '¥',
    },
  ];

/**
 * @param error 是否是错误
 * @param fullWidth 是否全部宽度
 * @param placeholder 说明文字
 * @param remark 追加说明
 * @param required 是否必填
 * @param type 类型
 * @param name 属性值.
 * @param onChange 更新处理方法
 */
class JSelect extends React.Component {

    constructor(props){
        super(props);
        this.state={
            value:'',
        }
    }

    static getDerivedStateFromProps(nextProps) {
        if (nextProps && null != nextProps && undefined != nextProps.onChange) {
            return {
                value : nextProps.value || ''
            }
        }
        return null;
    }

    onChange = (evt)=>{
        const fix =evt.target.value;
        const {onChange,data,name} = this.props;
        if(onChange){
            const item = data.filter(v=>v.value == fix)[0];
            onChange(item,name);
        }else{
            this.setState({value:fix});
        }
    }

    render() {
        const { data=currencies, error, fullWidth = true, placeholder = 'placeholder',
          required=false,disabled=false,
            remark,width=180} = this.props;
        const {value} = this.state;
        return  (<TextField
            select
            error={error}
            label={placeholder}
            fullWidth={fullWidth}
            size="small"
            value={value}
            onChange={this.onChange}
            helperText={remark}
            required={required}
            variant="outlined"
            disabled={disabled}
            style={{minWidth:width}}
          >
            {data.map((option) => (
              <MenuItem key={option.value} value={option.value}>
                {option.label}
              </MenuItem>
            ))}
          </TextField>);
    }
}

export default JSelect;

import TextField from '@material-ui/core/TextField';
import MenuItem from '@material-ui/core/MenuItem';

const currencies = [
    {
      value: 'USD',
      label: '$',
    },
    {
      value: 'EUR',
      label: '€',
    },
    {
      value: 'BTC',
      label: '฿',
    },
    {
      value: 'JPY',
      label: '¥',
    },
  ];

/**
 * @param error 是否是错误
 * @param fullWidth 是否全部宽度
 * @param placeholder 说明文字
 * @param remark 追加说明
 * @param required 是否必填
 * @param type 类型
 * @param name 属性值.
 * @param onChange 更新处理方法
 */
class JSelect extends React.Component {

    constructor(props){
        super(props);
        this.state={
            value:'',
        }
    }

    static getDerivedStateFromProps(nextProps) {
        if (nextProps && null != nextProps && undefined != nextProps.onChange) {
            return {
                value : nextProps.value || ''
            }
        }
        return null;
    }

    onChange = (evt)=>{
        const fix =evt.target.value;
        const {onChange,data,name} = this.props;
        if(onChange){
            const item = data.filter(v=>v.value == fix)[0];
            onChange(item,name);
        }else{
            this.setState({value:fix});
        }
    }

    render() {
        const { data=currencies, error, fullWidth = true, placeholder = 'placeholder',
          required=false,disabled=false,
            remark,width=180} = this.props;
        const {value} = this.state;
        return  (<TextField
            select
            error={error}
            label={placeholder}
            fullWidth={fullWidth}
            size="small"
            value={value}
            onChange={this.onChange}
            helperText={remark}
            required={required}
            variant="outlined"
            disabled={disabled}
            style={{minWidth:width}}
          >
            {data.map((option) => (
              <MenuItem key={option.value} value={option.value}>
                {option.label}
              </MenuItem>
            ))}
          </TextField>);
    }
}

export default JSelect;

 

import TextField from '@material-ui/core/TextField';

import MenuItem from '@material-ui/core/MenuItem';

const currencies = [

{

value: 'USD',

label: '$',

},

{

value: 'EUR',

label: '€',

},

{

value: 'BTC',

label: '฿',

},

{

value: 'JPY',

label: '¥',

},

];

/**

* @paramerror 是否是错误

* @paramfullWidth 是否全部宽度

* @paramplaceholder 说明文字

* @paramremark 追加说明

* @paramrequired 是否必填

* @paramtype 类型

* @paramname 属性值.

* @paramonChange 更新处理方法

*/

class JSelect extends React.Component {

constructor(props){

super(props);

this.state={

value:'',

}

}

static getDerivedStateFromProps(nextProps) {

if (nextProps && null != nextProps && undefined != nextProps.onChange) {

return {

value : nextProps.value || ''

}

}

return null;

}

onChange = (evt)=>{

const fix =evt.target.value;

const {onChange,data,name} = this.props;

if(onChange){

const item = data.filter(v=>v.value == fix)[0];

onChange(item,name);

}else{

this.setState({value:fix});

}

}

render() {

const { data=currencies, error, fullWidth = true, placeholder = 'placeholder',

required=false,disabled=false,

remark,width=180} = this.props;

const {value} = this.state;

return (<TextField

select

error={error}

label={placeholder}

fullWidth={fullWidth}

size="small"

value={value}

onChange={this.onChange}

helperText={remark}

required={required}

variant="outlined"

disabled={disabled}

style={{minWidth:width}}

>

{data.map((option) => (

<MenuItem key={option.value} value={option.value}>

{option.label}

</MenuItem>

))}

</TextField>);

}

}

export default JSelect;