reactjs - onChange 没有显示数据，但它正在正确调用它

Question

const handleInputDropdownChange = (e) => {
    //console.log(e.target.name + e.target.value);
    state[e.target.name] = e.target.value;
};


<Field className="dropwdown" name="applicaiton_type" as="select" id="application_type" onChange={handleInputDropdownChange}>
    <option value="">Select Application Type</option>
    <optgroup label="app group 1">
      <option value="1">App 1</option>
      <option value="2">App2 2</option>
    </optgroup>
    <optgroup label="app group 2">
      <option value="3">App 3</option>
      <option value="4">App 4</option>
    </optgroup>

</Field>

^^ 不工作^^

当我尝试在下拉列表中选择时，它不会显示 onSelect 的方式。但是即使它不显示它，它也会正确地将它存储在数据库中。我如何同时获得 onSelect 和 onChange 的功能？

VV 工作 VV

<Field className="dropwdown" name="vac_ban" as="select" id="vac_ban" onChange={handleInputDropdownChange}>
        <option value="">Do you have a vac ban?</option>
          <option value="true">Yes</option>
          <option value="false">No</option>
</Field>

Answer 1

您需要通过调用该setState方法来设置状态。这将启动 react 的协调周期，并按照您的预期更新 UI。

const handleInputDropdownChange = (e) => {
    setState((state)=>{
     state[e.target.name] = e.target.value;
    })
};


<Field className="dropwdown" name="applicaiton_type" as="select" id="application_type" onChange={handleInputDropdownChange}>
    <option value="">Select Application Type</option>
    <optgroup label="app group 1">
      <option value="1">App 1</option>
      <option value="2">App2 2</option>
    </optgroup>
    <optgroup label="app group 2">
      <option value="3">App 3</option>
      <option value="4">App 4</option>
    </optgroup>

</Field>