Reactjs 反应设置值以选择“不工作”，但使用“在中选择”选项可以

在我的例子中，我使用select来维护一些搜索条件，如下所示：

<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>

<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>

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

行动：

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

减速器：

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，如下所示：

{JSON.stringify（this.props.searchTerms，null，2）}

点击按钮后，按钮点击被触发，动作被调度，在控制台中我可以看到正确的值，

Pre

中的输出也被更改，但选择没有更改

---

请告诉我原因在哪里。

好吧，我还没有测试过，但你可以尝试两种方法

将prop值分配到state中，并在value属性中设置它

value={this.state.value}

或

对值使用sanitize

value={sanitize（this.props.searchTerms.condition）}

签出后，我正在创建一个最小化版本的select代码，它对我来说很好

const组件=（）=>{
const[condition，setCondition]=useState（“”）
返回(
setCondition（evt.target.value）}
>
选择选项
opt1
opt2
opt3
)
}

---

发布您的

状态

和

选择更改

功能，并在返回和发布输出之前尝试打印

此.props.searchTerms.condition

。@ravibagul91请查看我的更新，我发布了主要的redux相关代码。您是否尝试返回调度功能？这是唯一不同于onSelectedChange

返回分派（updateSearchTermsAction（“条件”，“opt2”））的东西<pre>{JSON.stringify(this.props.searchTerms, null, 2)}</pre>

 const Component = () => {
  const [condition, setCondition] = useState("")
  return (
    <div>
      <select 
        value={condition}
        onChange={(evt) => setCondition(evt.target.value)} 
      >
        <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>
    </div>
  )
}