默认值不会在输入中更新

Question

在输入组件的下拉列表中填充的某些记录的列表中。默认值是在页面加载时设置的，但我需要在按钮的点击事件时更新它。请参阅以下代码。

Home.js

const allList = [
{ id: "1", value: "Fruits" },
{ id: "2", value: "Vegetables" },
{ id: "3", value: "Grains" },
{ id: "4", value: "Milk" },
{ id: "5", value: "Meat" },
{ id: "6", value: "Fish" },
{ id: "7", value: "Pulses" }
];
const [itemList, setItemList] = useState(allList);
const [newValue, setNewValue] = useState(allList[0].value)
// I want to set the value on click of cancel button
const handleCancel = (e) => {
setNewValue(allList[2].value)
setPopup(false);
};
return (
<>
<DataList
defaultValue={newValue}
list="itemListOptions"
id="itemList"
placeholder="Search/select items"
data={itemList}
onSelectionChange={itemChanged}
></DataList>
{popup === true ? (
<Popup okbtnClick={handleOK} canclebtnclick={handleCancel} />
) : null}
</>
)

DataList.js

<input
defaultValue={props?.defaultValue ?? ""}
className="form-control cpselect"
id={props?.id ?? ""}
list={props?.list ?? ""}
placeholder={props?.placeholder ?? ""}
onChange={props?.onSelectionChange ?? ""}
/>
<datalist key={props.id} id={props?.list ?? ""}>
{props.data.map((d) => {
return <option key={d.id} id={d.id} value={d.value}></option>;
})}
</datalist>

我的意图是在单击取消按钮时更改输入字段中的defaultValue。在这里，它加载第一个元素，点击事件应该加载第三个元素。什么是最佳的解决方案？

请参阅Codesandbox链接：https://codesandbox.io/s/clever-rumple-ig0wwj

Answer 1

您要做的是使用value而不是defaultValue。

defaultValue属性的配置方式是，它只读取道具一次，然后创建一个处理更改的内部状态。