如何在單擊對話框按鈕時在輸入中設置默認數據？

Question

在也有輸入框的下拉組件中，填充了一組記錄。 頁面加載時在該輸入中設置默認值。 單擊特定記錄時會更改輸入中的數據。 單擊記錄時還會彈出一個對話框，該對話框具有“取消”和“確定”按鈕，可在單擊時發送一些相應的輸出。 我的意圖是在單擊取消按鈕時設置默認值。

請參考下面的代碼

const allList = [
    { id: "1", value: "Fruits" },
    { id: "2", value: "Vegetables" },
    { id: "3", value: "Grains" },
    { id: "4", value: "Milk" }
  ];

  const [itemList, setItemList] = useState(allList);
  const [popup, setPopup] = useState(false);
  const [cancel, setCancel] = useState(false);
  const itemChanged = (e) => {
    if (e.nativeEvent.inputType) {
      console.log("Data Changed from key press.....", e.currentTarget.value);
    } else {
      console.log("Data Changed from Drop down.....", e.currentTarget.value);
      setPopup(true);
    }
  };

  const handleOK = () => {
    console.log("OK");
    setPopup(false);
  };

  const handleCancel = () => {
    setCancel(true);
    setPopup(false);
  };

  //render grouped data
  return (
    <>
      <div className="col-md-5 profile-name">
        <div>
          <label className="form-label pt-2">Item ID</label>
        </div>
        <div className="select-with-search">
          <DataList
            defaultValue={allList[0].value}
            list="itemListOptions"
            id="itemList"
            placeholder="Search/select items"
            data={itemList}
            onSelectionChange={itemChanged}
          ></DataList>
        </div>
      </div>
      {popup === true ? (
        <Popup okbtnClick={handleOK} canclebtnclick={handleCancel} />
      ) : null}
    </>
  );

彈出文件

<div className="modal-footer">
            <button
              type="button"
              className="btn btn-custom ok"
              data-bs-dismiss="modal"
              onClick={() => {
                props?.okbtnClick(true) ?? null;
              }}
            >
              OK
            </button>
            <button
              type="button"
              className="btn btn-custom cancel"
              data-bs-dismiss="modal"
              onClick={() => {
                props?.canclebtnclick(false) ?? null;
              }}
            >
              CANCEL
            </button>
</div>

從上面的代碼可以看出，默認值設置為“Fruits”，但在彈出框上單擊“取消”時它不會更新。 什么可能是最好的最優解決方案？

另請參考 Codesandbox 鏈接： https ://codesandbox.io/s/clever-rumple-ig0wwj

Answer 1

您可以做的是將默認值置於狀態

const [defaultValue, setDefaultValue] = useState(allList[0].value)

const handleCancel = () => {
    setCancel(true);
    setPopup(false);
    setDefaultValue(otherValue)
  };

我還認為將更多數據存儲在一個狀態中是一種更好的做法，以避免像上面那樣在一個函數中使用 3 個 setStates，從而避免 3 個渲染。

  const [state, setState] = useState({
    cancel: false,
    popup: false,
    defaultValue: allList[0].value
  })

  const handleCancel = () => {
    setState({
        ...state,
        cancel: true,
        popup: false,
        defaultValue: otherValue
    })
  };