React中onChange与setState联动异常：搜索框无法输入求助

嘿，我仔细看了你的代码，马上就找到问题所在了——你遇到的搜索框没法输入的情况，核心原因是组件重复创建导致的重新挂载，结合你的代码来具体说说：

问题根源 #

在你的SearchBox组件里，CustomSearchBox是定义在组件函数体内部的。当父组件Tagsearch调用setState更新hitsDisplay状态时，会触发父组件重新渲染，进而带动SearchBox也重新渲染。这时候每次都会生成一个全新的CustomSearchBox组件，React会把旧的组件卸载再挂载新的，直接导致输入框的状态丢失、焦点被重置，自然就没法正常输入了。

另外还有个小细节：你的handleChange函数里传递refine的方式有点冗余，也可以优化下状态更新的逻辑，减少不必要的渲染。

解决方案 #

方案1：把CustomSearchBox移到SearchBox组件外部定义

把通过connectSearchBox包装的组件移到函数外面，这样它就不会随SearchBox的渲染而重复创建：

// 将CustomSearchBox移到SearchBox组件外部，避免重复创建
const CustomSearchBox = connectSearchBox(({ currentRefinement, refine, openDisplay, closeDisplay }) => {
  const handleChange = (e) => {
    const inputValue = e.target.value;
    refine(inputValue);
    
    // 根据输入值控制结果区域显示/隐藏
    if (inputValue !== "") {
      openDisplay();
    } else {
      closeDisplay();
    }
  };

  return (
    <label>
      <ul style={styles.container}>
        <input
          style={styles.input}
          type="text"
          value={currentRefinement}
          onChange={handleChange}
        />
      </ul>
    </label>
  );
});

const SearchBox = props => {
  const { openDisplay, closeDisplay } = props;
  // 直接将所需props传递给已定义好的CustomSearchBox
  return <CustomSearchBox openDisplay={openDisplay} closeDisplay={closeDisplay} />;
};

export default SearchBox;

方案2：用useMemo缓存CustomSearchBox（函数组件适用）

如果因为某些限制不能把组件移到外面，可以用React.useMemo来缓存CustomSearchBox，确保只有当依赖项变化时才重新创建：

import React, { useMemo } from 'react';

const SearchBox = props => {
  const { connectSearchBox, openDisplay, closeDisplay } = props;

  // 用useMemo缓存CustomSearchBox，避免每次渲染都重新创建
  const CustomSearchBox = useMemo(() => {
    return connectSearchBox(({ currentRefinement, refine }) => {
      const handleChange = (e) => {
        const inputValue = e.target.value;
        refine(inputValue);
        
        if (inputValue !== "") {
          openDisplay();
        } else {
          closeDisplay();
        }
      };

      return (
        <label>
          <ul style={styles.container}>
            <input
              style={styles.input}
              type="text"
              value={currentRefinement}
              onChange={handleChange}
            />
          </ul>
        </label>
      );
    });
  }, [connectSearchBox, openDisplay, closeDisplay]); // 依赖项变化时才重新生成组件

  return <CustomSearchBox />;
};

export default SearchBox;

额外优化提示 #

在你的Tagsearch类组件里，handleSelect和handleRemoveItem方法记得要绑定this，不然会出现this指向错误的问题：

constructor(props) {
  super(props);
  this.state = { hitsDisplay:false, inputContent:"", tags:[] };
  // 绑定方法到当前实例
  this.handleSelect = this.handleSelect.bind(this);
  this.handleRemoveItem = this.handleRemoveItem.bind(this);
}

这样能避免每次渲染都创建新的函数，提升组件性能。

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