出现搜索栏，但我无法输入文本答案

【问题标题】：A search bar appears, but I CANNOT input text出现搜索栏，但我无法输入文本
【发布时间】：2019-08-08 02:23:58
【问题描述】：

我尝试使用 react 原生元素创建搜索栏。当我运行代码时，出现了一个搜索栏，但它不允许我在其中输入文本。事实上，搜索栏甚至没有占据模拟器的顶部。它就像一个小按钮的大小。它看起来像一个图标或静止图像，不允许我输入文本。这曾经发生在任何人身上吗？下面是我写的代码。有人知道可能是什么问题吗？我安装了 RN 元素并链接了它。我什至只是为了它而安装了 NPM，但什么也没发生。任何帮助或线索将不胜感激。这是我要创建的搜索栏的链接： https://react-native-training.github.io/react-native-elements/docs/searchbar.html#docsNav

import { SearchBar } from 'react-native-elements';

export default SearchBar extends React.Component {
      constructor(props) {
         super(props);
         this.state = {
         search: ""
         };
         updateSearch = search => {
        this.setState({ search });
         };
       }
          render(){
            return(
              <SearchBar
                 containerStyle={{
                 backgroundColor: "white",
                 borderBottomWidth: 1,
                 borderRadius: 1 1
               }}
              inputStyle={{ backgroundColor: "white" }}
              placeholder="Type Here..."
              placeholderTextColor={ "White" }
              onChangeText={this.updateSearch}
              value={search}
              />
             )
            }
          }

【问题讨论】：

嗨 csb00，请阅读此内容 - stackoverflow.com/help/someone-answers，然后尝试关闭问题。

标签： react-native ecmascript-6 uisearchbar

【解决方案1】：

我认为问题是，

value={search}

应该是这样，

value={this.state.search}

或者你应该在变量中获取状态，

render(){
   const { search } = this.state;            
return(

注意：你在constructor里面写了updateSearch方法，你需要写在constructor外面（如果不是错字）

这是你提供的link的例子，

import { SearchBar } from 'react-native-elements';

export default class App extends React.Component {
  state = {
    search: '',
  };

  updateSearch = search => {         //This function is outside of constructor
    this.setState({ search });
  };

  render() {
    const { search } = this.state;   //You missed this

    return (
      <SearchBar
        placeholder="Type Here..."
        onChangeText={this.updateSearch}
        value={search}
      />
    );
  }
}

【讨论】：

【解决方案2】：

您需要使用this.state.search 调用构造函数中设置的值

【讨论】：