Question

我有一个数组列表，当我开始输入input数组列表时，将过滤与value相对应的内容。它可以工作，但是在输入字符后我将注意力集中在input上。

我的代码：

const MyPage = (props) => {

  const [searchTerm, setSearchTerm] = useState("");

  const results = !searchTerm
      ? people
      : people.filter(person =>
          person.toLowerCase().includes(searchTerm.toLocaleLowerCase())
        );

  const handleChange = event => {
      setSearchTerm(event.target.value);
    };

  const Desktop = ({ children }) => {
    const isDesktop = useMediaQuery({ minWidth: 992 })

    return (
      isDesktop?
      <View>
          <input
          type="text"
          placeholder="Search"
          value={searchTerm}
          onChange={handleChange}
          />
          <View style={{width:100, height:100, backgroundColor:'red'}}>
            {results.map(item => (
              <Text>{item}</Text>
            ))}
          </View>
      </View>
      :null
    )
  }

  return(
    <View style={{width:'100%',justifyContent:'center'}}>
      <Desktop/>
    </View>
  )
}

如果我直接输入

，则不会返回<Desktop/>

<input
          type="text"
          placeholder="Search"
          value={searchTerm}
          onChange={handleChange}
          />
          <View style={{width:100, height:100, backgroundColor:'red'}}>
            {results.map(item => (
              <Text>{item}</Text>
            ))}
          </View>

它将起作用。知道如何解决此问题吗？

任何建议或评论将不胜感激！

谢谢！

Answer 1

Moving the Desktop component outside of the MyApp组件解决了此问题。这样做的主要原因是Desktop组件在每次渲染时都会重新创建（每次键入），这将导致输入元素失去焦点。您也可以使用described in detail in the official React documentation的useCallback和useMemo钩子来缓解这种情况，但是在此示例中不需要它们。

另请参阅this answer on declaring other components within a component。

Answer 2

使用输入的autoFocus={true}属性

Answer 3

您也可以使用输入内容的autoFocus属性作为骇客技巧：

        <input
          autoFocus={true}
          type="text"
          placeholder="Search"
          value={searchTerm}
          onChange={handleChange}
    />

Answer 4

问题是您在组件内部有一个组件。因此，当您的状态更改时，Desktop组件会被重新初始化，这会导致input失去焦点。我将两个组件合并为一个。如果您实际上需要Desktop作为它自己的组件，那么您可能想在Desktop之外声明MyPage并将searchTerm, results, handleChange作为props传递给Desktop。 / p>

const MyPage = props => {
  const [searchTerm, setSearchTerm] = useState("");
  const isDesktop = useMediaQuery({ minWidth: 992 });

  const results = !searchTerm
    ? people
    : people.filter(person =>
        person.toLowerCase().includes(searchTerm.toLocaleLowerCase())
      );

  const handleChange = event => {
    setSearchTerm(event.target.value);
  };

  return (
    <View style={{ width: "100%", justifyContent: "center" }}>
      {isDesktop && (
        <View>
          <input
            type="text"
            placeholder="Search"
            value={searchTerm}
            onChange={handleChange}
          />
          <View style={{ width: 100, height: 100, backgroundColor: "red" }}>
            {results.map(item => (
              <Text>{item}</Text>
            ))}
          </View>
        </View>
      )}
    </View>
  );
};

过滤数据时，react输入字段将失去焦点

4 个答案: