如何在单击对话框按钮时在输入中设置默认数据？

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
    })
  };