phản ứng trường đầu vào sẽ mất tập trung khi lọc dữ liệu

Tôi có một danh sách mảng và khi tôi bắt đầu gõ vào inputdanh sách mảng sẽ lọc tương ứng với value. Nó hoạt động nhưng tôi mất tập trung inputsau khi gõ một ký tự.

Mã của tôi:

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>
  )
}

Thay vì trở về <Desktop/>nếu tôi trực tiếp đặt

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

Nó sẽ làm việc. Bất kỳ ý tưởng làm thế nào để khắc phục vấn đề này?

Bất kỳ lời khuyên hoặc nhận xét sẽ được đánh giá cao!

Cảm ơn trước!

Di chuyển Desktopthành phần bên ngoàiMyApp thành phần khắc phục vấn đề này. Lý do chính cho điều này là Desktopthành phần được tạo lại trên mỗi kết xuất (mỗi lần bạn nhập), khiến phần tử đầu vào mất tiêu điểm. Bạn cũng có thể giảm thiểu phần nào điều này bằng cách sử dụng các hook useCallbackvà useMemohook, cả hai được mô tả chi tiết trong tài liệu React chính thức , nhưng trong ví dụ này chúng không cần thiết.

Cũng xem câu trả lời này về khai báo các thành phần khác trong một thành phần .

Sử dụng autoFocus={true}tài sản của đầu vào

Cũng như một thủ thuật hacky, bạn có thể sử dụng autoFocusthuộc tính của đầu vào của mình:

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

Vấn đề là bạn có một thành phần bên trong một thành phần. Vì vậy, khi trạng thái của bạn thay đổi, Desktopthành phần sẽ được khởi tạo lại , điều này làm inputcho mất tập trung. Tôi hợp nhất cả hai thành phần trong một. Nếu bạn thực sự cần Desktopphải là thành phần của riêng nó, thì bạn có thể muốn khai báo Desktopbên ngoài MyPagevà chuyển searchTerm, results, handleChangelàm đạo cụ cho Desktop.

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>
  );
};