反應選擇選項未被選中

Question

我正在使用react-select包。 當我選擇一個下拉選項時，我的 onChange 操作可以正常工作並更新狀態。 但是該選項沒有被選中。 意思是，它不顯示映射到狀態的值，而只顯示默認占位符。

我想我錯過了一些小東西，但我對 react 和 redux 有一些新的認識，我不確定這可能是什么。 提前感謝您的幫助:)

正文.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
    }
}

減速器.js

const initialState = {
    feature: '',
    scenarios: [],
    activeIndex: '',
    selectedOption: ''
}

Answer 1

在回答我自己的問題時，我發現僅傳遞選定的選項標簽/值是不夠的，我們需要傳遞整個對象；

{ value: 'navigate', label: 'Navigate to <URL>' }

然后我們將我們的 select 標簽的 value 屬性映射到 state 的 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))
        }
    };
};