ReactJs Select 添加默認值

Question

如果用戶沒有在 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
    });
}

Answer 1

您可以向 select 元素添加一個 value 屬性，由您的狀態設置。

<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 為組件設置默認狀態： 在 React / React Native 中使用構造函數與 getInitialState 有什么區別？

Answer 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 />
</>
)