Question

当用户单击文本输入时，我想在我的react组件中显示某些内容（类似于Instagram的搜索，如果您单击其输入字段，则会显示搜索组件建议。

const SearchScreen = props => {

  const renderSearch = () => {
    return (
      <>
       // need to display the search suggestion
      </>
    )
  }

  return (
    <>
      <TextInput
        placeholder="Search"
        onChangeText={text => handleChange(text)}
        value={searchText}
        onFocus={() => renderSearch()} // based on focus, then render component
      />
      <View>
        // how do I render here?
        // this will render on load, but need to render onFocus
        {renderSearch}
      </View>
    </>
  );
};

Answer 1

您可以应用与stackoverflow.com/a/34091564/1839692类似的模式。

例如，您可以尝试类似的操作：

const SearchScreen = props => {
  const [searchFocus, setSearchFocus] = useState(false)

  const renderSearch = () => {
    return (
      <>
       // need to display the search suggestion
      </>
    )
  }

  return (
    <>
      <TextInput
        placeholder="Search"
        onChangeText={text => handleChange(text)}
        value={searchText}
        onFocus={() => setSearchFocus(true)}
        onBlur={() => setSearchFocus(false)}
      />
      { searchFocus 
        ? <View>
            {renderSearch}
          </View> 
        : <View>
            // Add here the code to display when not searching
          </View>
      }

    </>
  );
};

基于TextInput onfocus反应本机渲染组件

1 个答案: