我正在使用react-select包。当我选择一个下拉选项时,我的onChange操作正常工作并更新状态。但该选项未被选中。意思是,它不显示映射到状态的值,而只显示默认占位符。
我想我错过了一些小东西,但我有些新的反应和redux,我不知道这可能是什么。我在这里先向您的帮助表示感谢 :)
Body.js
<Select id="input-field" value={this.props.create.selectedOption} onChange={this.props.addOption}
options={[
{ value: 'navigate', label: 'Navigate to <URL>' },
{ value: 'enter', label: 'I enter <InputValue> to the <ElementKey>' },
{ value: 'click', label: 'Click on <ElementKey>' },
]}
/>
const mapStateToProps = (state, ownProps) => {
return {
create: state.reducerCreate
}
}
Reducer.js
const initialState = {
feature: '',
scenarios: [],
activeIndex: '',
selectedOption: ''
}
回答我自己的问题,我发现仅仅传递选定的选项标签/值是不够的,我们需要传递整个对象;
{ value: 'navigate', label: 'Navigate to <URL>' }
然后我们将select标签的value属性映射到状态的值。
更新了Body.js;
<Select id="input-field" componentClass="select" value={this.props.create.selectedOption.value} onChange={this.props.addOption}
const mapDispatchToProps = (dispatch, ownProps) => {
return {
addOption: (option) => {
console.log(option)
dispatch(addOption(option))
}
};
};