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>