ReactJs 选择添加默认值答案

【问题标题】：ReactJs Select add default valueReactJs 选择添加默认值
【发布时间】：2016-12-20 23:28:53
【问题描述】：

如果用户没有在 ReactJs 中触摸它，我想存储选择默认值。这怎么可能？

<select onChange={this.valSelected.bind(this)}>
    {currencies.map(function(name, index){
        return <option value={name}>{name}</option>;
    })}
</select>

和

valSelected(event){
    this.setState({
        valSelected: event.target.value
    });
}

【问题讨论】：

标签： javascript html select reactjs

【解决方案1】：

您只需将 value 属性添加到 select 元素，由您的状态设置。

<select value={this.state.valSelected} onChange={this.valSelected.bind(this)}>
    {currencies.map(function(name, index){
        return <option value={name}>{name}</option>;
    })}
</select>

这在反应文档中有所描述：Doc Link

然后为组件设置一个默认状态，可以在构造函数中，也可以使用 getInitialState：What is the difference between using constructor vs getInitialState in React / React Native?

【讨论】：

【解决方案2】：

使用defaultValue 选择默认值。

    const statusOptions = [
        { value: 1, label: 'Publish' },
        { value: 0, label: 'Unpublish' }
    ];
    const [statusValue, setStatusValue] = useState('');
    const handleStatusChange = e => {
        setStatusValue(e.value);
    }

return(
<>
<Select options={statusOptions} defaultValue={[{ value: published, label: published == 1 ? 'Publish' : 'Unpublish' }]} onChange={handleStatusChange} value={statusOptions.find(obj => obj.value === statusValue)} required />
</>
)

【讨论】：