reactjs - react 设置值选择不起作用，但在选项中使用选择就可以了

Question

就我而言，我使用选择来维护一些搜索条件，如下所示:

<select onChange={this.props.onSelectChange}>
    <option value="" selected={this.props.searchTerms.condition== ""}>
       Select Option
    </option>
    <option value="opt1" label="opt1" selected={this.props.searchTerms.condition == "opt1"}>
       opt1
    </option>
    <option value="opt2" label="opt2" selected={this.props.searchTerms.condition == "opt2"}>
        opt2
    </option>
    <option value="opt3" label="opt3" selected={this.props.searchTerms.condition == "opt3"}>
        opt3
    </option>
</select>

您可以看到我在选项中使用了 selected 属性来使所选项目成为我设置的值。

但这样我会收到来自 React 的警告，说我应该使用 value 代替。我这样更改后:

<select onChange={this.props.onSelectChange} value={this.props.searchTerms.condition}>
   <option value="" }>
      Select Option
   </option>
   <option value="opt1" label="opt1" >
      opt1
   </option>
   <option value="opt2" label="opt2" >
      opt2
   </option>
   <option value="opt3" label="opt3">
      opt3
   </option>
</select>

设置值不会反射(reflect)到所选项目。但是 Prop 更改正确，我在某个地方打印它并且值是正确的。

在这种情况下，我使用了react-redux， Prop 是从某个按钮的 Action 分派(dispatch)中更改的，在该 Action 中，搜索状态将被更新，并且搜索状态通过使用redux绑定(bind)到 Prop 。这是redux相关代码:

绑定(bind):

 export const mapDispatchToProps = (dispatch, ownProps) => ({
      onSelectChange: event => dispatch(updateSearchTermsAction("condition", event.target.value)),
      buttonClick: event => {//this is the issue event
        event.preventDefault();
        dispatch(updateSearchTermsAction("condition", "opt2"));
        return false;
      }
    });

行动:

export const updateSearchTermsAction = (key, value) => ({ type: UPDATE_SEACHTERMS, key: key, payload: value });

reducer :

const initialState = fromJS({ panelState: true, searchTerms: { condition: "" }, data: [] });
export default (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_SEACHTERMS:
      console.log(`${action.key} change detect ${action.payload}`);//correct here
      return state.setIn(["searchTerms", action.key], action.payload);
    default:
      return state;
  }

出于调试目的，我将整个“searchTerms”输出为 HTML，如下所示:

<pre>{JSON.stringify(this.props.searchTerms, null, 2)}</pre>

单击按钮后，触发buttonClick，调度操作，从reducer我可以在控制台中看到正确的值，并且Pre中的输出也发生了变化，但选择没有改变。

请给我一些建议，了解可能的原因。

Answer 1

嗯，我还没有测试过，但你可以尝试两种方法来达到同样的效果。

1. 将 prop 值分配给 state 并在 value 属性中设置它 value={this.state.value}。

或

对值使用 sanitize value={sanitize(this.props.searchTerms.condition)}