React Semantic UI Search组件仅单次接收单个字符且输入不显示问题求助

问题原因 #

Semantic UI React的Search组件与普通Input组件的onChange回调参数结构不同：

• Input的onChange回调第一个参数是事件对象，需通过event.target.value获取输入值；
• Search的onChange回调第一个参数是当前输入的完整查询字符串，第二个参数才是事件对象。

如果按照Input的写法处理Search的onChange，会导致无法正确获取累积的输入值，进而出现输入框不显示内容、每次仅打印单个字符的问题。

修复步骤 #

1. 修正onChange的参数接收：直接使用回调的第一个参数作为输入值，而非通过事件对象获取。
2. 正确绑定受控状态：将Search的value属性与状态变量绑定，确保输入框内容与状态同步。

示例代码 #

import { useState } from 'react';
import { Search } from 'semantic-ui-react';

function App() {
  const [searchValue, setSearchValue] = useState('');

  const handleSearchChange = (value) => {
    // 直接使用第一个参数作为输入值
    setSearchValue(value);
    console.log(value); // 现在会打印完整的输入内容，比如输入'abcd'会依次打印'a'、'ab'、'abc'、'abcd'
  };

  return (
    <div className="App">
      <Search
        value={searchValue}
        onChange={handleSearchChange}
        placeholder="输入搜索内容..."
      />
    </div>
  );
}

export default App;

额外说明 #

如果需要使用事件对象（比如获取输入框DOM元素），可以在回调中接收第二个参数：

const handleSearchChange = (value, event) => {
  setSearchValue(value);
  console.log('输入值:', value);
  console.log('事件对象:', event);
};

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