点击对话框取消按钮时如何重置输入框默认值？

带输入框的下拉组件加载了一组记录，页面初始化时输入框默认值为**「Fruits」**。点击下拉选项会修改输入框内容并弹出包含OK、Cancel按钮的对话框，需求是点击Cancel按钮时将输入框恢复为默认值，但当前代码未实现该功能。

核心思路是将输入框改为受控组件，通过状态管理当前选中值，点击Cancel时直接重置状态到默认值即可。具体修改步骤如下：

1. 新增状态管理当前选中值 #

在主组件中添加状态变量，跟踪输入框的当前值，初始值设为默认的「Fruits」：

const [selectedValue, setSelectedValue] = useState(allList[0].value);

2. 修改输入框为受控组件 #

将DataList的defaultValue替换为value，绑定到selectedValue，同时补充键盘输入时的状态更新逻辑：

<DataList
  value={selectedValue} // 受控绑定当前值
  list="itemListOptions"
  id="itemList"
  placeholder="Search/select items"
  data={itemList}
  onSelectionChange={itemChanged}
  onChange={(e) => setSelectedValue(e.target.value)} // 处理键盘输入的内容变化
></DataList>

3. 更新选择事件处理逻辑 #

在itemChanged函数中同步更新selectedValue状态，确保下拉选择后输入框能实时显示新值：

const itemChanged = (e) => {
  if (e.nativeEvent.inputType) {
    console.log("Data Changed from key press.....", e.currentTarget.value);
    setSelectedValue(e.currentTarget.value);
  } else {
    const newValue = e.currentTarget.value;
    console.log("Data Changed from Drop down.....", newValue);
    setSelectedValue(newValue);
    setPopup(true);
  }
};

4. 修改Cancel按钮逻辑 #

在handleCancel函数中直接将selectedValue重置为默认值，同时关闭弹窗：

const handleCancel = () => {
  setSelectedValue(allList[0].value); // 恢复默认值
  setPopup(false);
};

5. 简化Popup组件的回调调用 #

Popup组件中按钮的回调无需传递多余参数，直接调用父组件传入的方法即可：

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

修改后的完整主组件代码 #

import { useState } from "react";
import DataList from "./DataList";
import Popup from "./Popup";

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

export default function App() {
  const [itemList, setItemList] = useState(allList);
  const [popup, setPopup] = useState(false);
  const [selectedValue, setSelectedValue] = useState(allList[0].value);

  const itemChanged = (e) => {
    if (e.nativeEvent.inputType) {
      console.log("Data Changed from key press.....", e.currentTarget.value);
      setSelectedValue(e.currentTarget.value);
    } else {
      const newValue = e.currentTarget.value;
      console.log("Data Changed from Drop down.....", newValue);
      setSelectedValue(newValue);
      setPopup(true);
    }
  };

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

  const handleCancel = () => {
    setSelectedValue(allList[0].value);
    setPopup(false);
  };

  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
            value={selectedValue}
            list="itemListOptions"
            id="itemList"
            placeholder="Search/select items"
            data={itemList}
            onSelectionChange={itemChanged}
            onChange={(e) => setSelectedValue(e.target.value)}
          ></DataList>
        </div>
      </div>
      {popup && <Popup okbtnClick={handleOK} canclebtnclick={handleCancel} />}
    </>
  );
}

内容的提问来源于stack exchange，提问作者Prakash Patil