默認值不會在輸入中更新

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，然后創建一個處理更改的內部狀態。