代码之家 › 专栏 › 技术社区 › Salvo

键入每个字符后,TextInput会失去焦点

parent-child rendering react-native reactjs javascript

Salvo · 技术社区 · 2 年前

我正在使用React构建表单,并尝试过滤 list 与 SearchInput (其工作原理与TextInput相同)位于子组件中 Header 。但每次我键入字符时,SearchInput都会失去焦点

function index() {
  const list = [//data\\]
  const [search, setSearch] = useState("");
  const [filteredResults, setFilteredResults] = useState([]);

  const searchItems = (searchValue) => {
    setSearch(searchValue);
    if (search !== "") {
      const filteredData = partners.filter((item) => {
        return Object.values(item)
          .join("")
          .toLowerCase()
          .includes(search.toLowerCase());
      });
      setFilteredResults(filteredData);
    } else {
      setFilteredResults(partners);
    }
  };

  const Header = () => (
    <Box>
      <SearchInput
        placeholder="Search"
        value={search}
        onChange={(e) => searchItems(e.target.value)}
      />
    </Box>
  );

  return (
    <Parent
      headerContent={<Header />}
    >
      <Box>
        <Table data={search.length > 1 ? filteredResults : list} />
      </Box>
    </Parent>
  );
}

export default index;

0 回复 | 直到 2 年前

gerrod 2 年前

哦,我想我现在可以看到问题了——这是你渲染 <SearchInput /> 组成部分您在每次渲染时都会无意中创建一个新的功能组件。内联 Header 直接进入 Parent 控制 headerContent 属性,或者创建一个完全独立的组件:

const Header = ({ search, onSearchChange }) => {
  const handleChange = (e) => onSearchChange(e.target.value);
  
  return (
    <Box>
      <SearchInput
        placeholder="Search"
        value={search}
        onChange={handleChange}
      />
    </Box>
  );
}

function index() {
  // ----- 8< -----
  return (
    <Parent
      headerContent={<Header search={search} onSearchChange={searchItems} />}
    >
      {/* ... */}
    </Parent>
  );
}

当你在那里的时候,你的比较有一个微妙的错误——看起来你在搜索你的 partners 有效地作为字符串列表;但是,既然你加入了他们,如果你有这样的合作伙伴:

'one'
'two'

你正在创建一个搜索字符串“onetwo”,所以搜索“et”会匹配,即使你实际上没有匹配的伴侣。你可以通过单独检查每个合作伙伴来解决这个问题。。。类似于:

const searchItems = (searchValue) => {
  setSearch(searchValue);
  
  if (search !== "") {
    const searchValueLower = searchValue.toLowerCase();
    const filteredData = partners.filter((item) => {
      return Object.values(item)
        .some(item => item.toLowerCase().includes(searchValueLower);
    });
    
    setFilteredResults(filteredData);
  } else {
    setFilteredResults(partners);
  }
};