React弹窗内Input元素无响应问题排查求助

问题概述 #

弹窗组件内的两个Input元素无法响应用户输入，此前相同配置的Input可正常工作。已在弹窗外用相同onChange与value配置的模拟Input测试，确认useState异步特性不是问题所在。

相关代码 #

组件定义 #

function Popup({ onClose, onSave }) {
    const [frequency, setFrequency] = useState("");
    const [focus, setFocus] = useState("");

    function handleFrequencyChange(event) {
      setFrequency(event.target.value);
    }

    function handleFocusChange(event) {
      setFocus(event.target.value);
    }
    return (
          <h3>Journal Goals</h3>
          <label style={{ display: "block", marginBottom: "10px" }}>
            Frequency:
            <input type="text" style={{ marginLeft: "10px" }} onChange={handleFrequencyChange}
             value={frequency}
            />
          </label>
          <label style={{ display: "block", marginBottom: "10px", marginLeft: "32px" }}>
            Focus:
            <input type="text" style={{ marginLeft: "10px" }} onChange={handleFocusChange} value={focus} />
          </label>
          <div style={{ display: "flex", justifyContent: "flex-end" }}>
            <button
              onMouseEnter={adjacentHandleMouseEnter}
              onMouseLeave={adjacentHandleMouseLeave}
             onClick={handleSave}>Save</button>
            <button
              onMouseEnter={adjacentHandleMouseEnter2}
              onMouseLeave={adjacentHandleMouseLeave2}
              onClick={closePopup}>Cancel</button>
      </div>
    );
  }
  const [showPopup, setShowPopup] = useState(false);

  function openPopup() {
    setShowPopup(true);
  }

  function closePopup() {
    setShowPopup(false);
  }

  function handleSave(data) {
    console.log(data);
    closePopup();
  }

调用代码 #

<button
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
          onClick={openPopup}>Goals</button>
   {showPopup && (
          <Popup onClose={closePopup} onSave={handleSave} />
        )}

控制台日志 #

SyntheticBaseEvent {_reactName: 'onClick', _targetInst: null, type: 'click', nativeEvent: PointerEvent, target: button, …}

问题排查与修复 #

核心问题 #

1. Popup组件内存在未定义函数：adjacentHandleMouseEnter、adjacentHandleMouseLeave、adjacentHandleMouseEnter2、adjacentHandleMouseLeave2、closePopup均未在组件内部定义，会触发JavaScript错误，导致组件渲染异常，阻塞Input交互。
2. Save按钮调用逻辑错误：直接调用未定义的handleSave，且未将输入数据传递给父组件的onSave。

修复后的代码 #

修正后的Popup组件

function Popup({ onClose, onSave }) {
    const [frequency, setFrequency] = useState("");
    const [focus, setFocus] = useState("");

    function handleFrequencyChange(event) {
      setFrequency(event.target.value);
    }

    function handleFocusChange(event) {
      setFocus(event.target.value);
    }

    // 定义鼠标事件函数（若不需要可直接删除对应属性）
    function adjacentHandleMouseEnter() {}
    function adjacentHandleMouseLeave() {}
    function adjacentHandleMouseEnter2() {}
    function adjacentHandleMouseLeave2() {}

    function handleSaveClick() {
      // 将输入数据传递给父组件的保存函数
      onSave({ frequency, focus });
      onClose();
    }

    return (
          <h3>Journal Goals</h3>
          <label style={{ display: "block", marginBottom: "10px" }}>
            Frequency:
            <input type="text" style={{ marginLeft: "10px" }} onChange={handleFrequencyChange} value={frequency} />
          </label>
          <label style={{ display: "block", marginBottom: "10px", marginLeft: "32px" }}>
            Focus:
            <input type="text" style={{ marginLeft: "10px" }} onChange={handleFocusChange} value={focus} />
          </label>
          <div style={{ display: "flex", justifyContent: "flex-end" }}>
            <button
              onMouseEnter={adjacentHandleMouseEnter}
              onMouseLeave={adjacentHandleMouseLeave}
              onClick={handleSaveClick}>Save</button>
            <button
              onMouseEnter={adjacentHandleMouseEnter2}
              onMouseLeave={adjacentHandleMouseLeave2}
              onClick={onClose}>Cancel</button>
      </div>
    );
  }

父组件handleSave函数优化

function handleSave(data) {
  console.log("保存的目标数据:", data);
  closePopup();
}

修复说明 #

• 替换closePopup为props传入的onClose，避免未定义错误。
• 补充组件内部缺失的鼠标事件函数，或直接删除不需要的鼠标事件属性。
• 创建handleSaveClick函数，将输入的frequency和focus数据传递给父组件的onSave，确保保存逻辑正常执行。

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