在formik中获取event.target Select onChange - ReactJS答案

【问题标题】：Get the event.target in formik Select onChange - ReactJS在formik中获取event.target Select onChange - ReactJS
【发布时间】：2019-08-29 14:38:03
【问题描述】：

以下是我的withFormik 表单中的选择。哪个工作正常。

<Select
    id="userList"
    name="userList"
    value={userList.names}
    initialValue={values.userList}
    className="select-box"
    onChange={setFieldValue}
/>

但是现在根据选择的值，我需要从选择中添加/删除类。所以我尝试了 e 但它只返回字段名称

<Select
    id="userList"
    name="userList"
    value={userList.names}
    initialValue={values.userList}
    className="select-box"
    onChange={e => {
        console.log(e) // => userList
    }}
/>

我什至尝试过，但没有运气

<Select
    id="userList"
    name="userList"
    value={userList.names}
    initialValue={values.userList}
    className="select-box"
    onChange={(field, value) => {
        console.log(field) // Response => userList
        setFieldValue(field, value)
    }}
/>

如何根据需要从选择中添加/删除类的值访问 onchange 中的事件。有点像 -

handleChange = e => {
    // Here e is refering to the Select
    if (e.target.value) {
      e.target.classList.remove("gray");
      e.target.classList.add("black");
    } else {
      e.target.classList.remove("black");
      e.target.classList.add("gray");
    }
  };

【问题讨论】：

标签： javascript reactjs ecmascript-6 onchange formik

【解决方案1】：

<Select /> 作为受控组件需要 value 属性才能使用状态的 selected 值。

value 属性不适用于 <option> 值。

因此，你可以有类似的东西：

state = {
  selected: '',
}

handleChange = e => {
  const selected = e.target.value; // selected name
  switch(selected) {
    // change class
  }
  this.setState({
    selected
  });
}

<Select value={this.state.selected} onChange={handleChange}>
 {userList.names.map(user =>
   <options value={user.name}>{user.name}</option>
 )}
</Select>

【讨论】：