React中实现输入与下拉选择均触发onChange事件的方法

要实现输入文本或选择下拉选项时均触发handleChange函数，同时文本框初始显示onenumber，需要做以下几处修改：

修改点说明 #

• 设置初始显示文本：将val的初始状态设为"onenumber"，满足文本框默认显示要求。
• 统一状态更新逻辑：重构handleChange函数，让它既能处理输入框的event对象，也能直接接收字符串值，这样点击选项时可以复用该函数的完整逻辑。
• 调整点击事件的处理逻辑：修改handleClick，不再直接调用setVal，而是将选中的文本传给handleChange，确保点击选项时也触发handleChange的所有操作（包括日志输出）。
• 移除多余的onKeyUp绑定：原输入框的onKeyUp={handleClick}会导致输入时触发下拉隐藏，打断正常输入流程，需要移除。

修改后的完整代码 #

import { useState } from "react";
export default function App() {
  const [show, setShow] = useState(true);
  // 初始化文本框显示内容
  const [val, setVal] = useState("onenumber");
  
  function handleClick(event) {
    // 将选中的选项文本传入handleChange
    handleChange(event.target.innerHTML);
    setShow(false);
  }
  
  // 重构handleChange，兼容event对象和直接传值两种场景
  function handleChange(input) {
    const value = input.target ? input.target.value : input;
    setVal(value);
    console.log(value);
  }
  
  return (
    <div className="App">
      <input
        type="text"
        value={val}
        onChange={handleChange}
      />
      {show && (
        <div
          style={{
            width: "180px",
            height: "80px",
            background: "pink"
          }}
          onClick={handleClick}
        >
          <div>one</div>
          <div>two</div>
          <div>three</div>
          <div>four</div>
        </div>
      )}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Sougata Mukherjee