基於 TextInput onfocus 反應原生渲染組件

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

    </>
  );
};