论坛 › 知识问答 › javascript - React Native TextInput setState() 问题

菜鸟教程小白 发表于 2022-12-11 19:58:09

javascript - React Native TextInput setState() 问题

                                            <p><p>我在 TextInput 的 onChangeText 中遇到 React Native 的 this.setState() 问题。我正在尝试在其下方的 Text 标记中显示 TextInput 的内容。然而，它什么也不显示—— setState() 调用永远不会改变 this.state.searchtext。我也没有错误。预先感谢您的帮助!这是我的代码:</p>

<pre><code> export default class ShowScreen extends Component {
constructor(props) {
    super(props);
    this.state = {
      searchtext: &#34;&#34;
    };
}
render() {
    var thisscreen = (
      &lt;View&gt;
            &lt;ScrollView
                horizontal={true}
                showsHorizontalScrollIndicator={false}
                pagingEnabled={true}
            &gt;
                &lt;View
                  style={{
                        flex: 1,
                        height: totalheight,
                        justifyContent: &#34;space-around&#34;,
                        alignItems: &#34;center&#34;,
                        width: totalwidth,
                        backgroundColor: &#34;#FF0000&#34;
                  }}
                &gt;
                  &lt;TextInput
                        style={{ height: 80, fontSize: 20 }}
                        placeholder=&#34;placeholder&#34;
                        value={this.state.searchtext}
                        onChangeText={searchtext =&gt;
                            this.setState({ searchtext })
                        }
                        ref={input =&gt; {
                            this.textInput = input;
                        }}
                        returnKeyType=&#34;go&#34;
                  /&gt;
                  &lt;Text&gt;{this.state.searchtext}&lt;/Text&gt;
                &lt;/View&gt;
            &lt;/ScrollView&gt;
      &lt;/View&gt;
    );
    return thisscreen;
}
}
</code></pre></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>在你的 <code>TextInput</code> 添加 <code>value</code> prop</p>

<pre><code>&lt;TextInput
style={{height: 80, fontSize: 20}}
placeholder=&#34;placeholder&#34;
value={this.state.searchtext}
onChangeText={(searchtext) =&gt; this.setState({ searchtext })}
ref={input =&gt; { this.textInput = input }}
returnKeyType=&#34;go&#34;
/&gt;
</code></pre></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - React Native TextInput setState() 问题，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/49606526/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/49606526/
                                                        </a>
                                                </p>
                                       

查看完整版本: javascript - React Native TextInput setState() 问题