默认值不会在输入中更新

Question

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

主页.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}
</>
)

数据列表.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属性的配置方式是它只读取一次 prop，然后创建一个处理更改的内部状态。