React Native TextInput setState() 问题

IT技术 javascript android ios reactjs react-native
2021-05-01 15:21:20

我在 TextInput 的 onChangeText 中遇到 React Native 的 this.setState() 问题。我试图在它下面的 Text 标签中显示 TextInput 的内容。然而，它什么也不显示—— setState() 调用永远不会改变 this.state.searchtext。我也没有收到任何错误。预先感谢您的帮助！这是我的代码：

 export default class ShowScreen extends Component {
constructor(props) {
    super(props);
    this.state = {
        searchtext: ""
    };
}
render() {
    var thisscreen = (
        <View>
            <ScrollView
                horizontal={true}
                showsHorizontalScrollIndicator={false}
                pagingEnabled={true}
            >
                <View
                    style={{
                        flex: 1,
                        height: totalheight,
                        justifyContent: "space-around",
                        alignItems: "center",
                        width: totalwidth,
                        backgroundColor: "#FF0000"
                    }}
                >
                    <TextInput
                        style={{ height: 80, fontSize: 20 }}
                        placeholder="placeholder"
                        value={this.state.searchtext}
                        onChangeText={searchtext =>
                            this.setState({ searchtext })
                        }
                        ref={input => {
                            this.textInput = input;
                        }}
                        returnKeyType="go"
                    />
                    <Text>{this.state.searchtext}</Text>
                </View>
            </ScrollView>
        </View>
    );
    return thisscreen;
}
}
4个回答

在您的TextInput添加valueprops中

<TextInput
 style={{height: 80, fontSize: 20}}
 placeholder="placeholder"
 value={this.state.searchtext}
 onChangeText={(searchtext) => this.setState({ searchtext })}
 ref={input => { this.textInput = input }}
 returnKeyType="go"
/>

嘿，您使用了一个变量来存储屏幕代码，即 thisscreen。这可能会阻止它更新状态。

你的渲染函数应该是这样的：

 render () {
   return (
     <View>
        <ScrollView
         horizontal={true}
         showsHorizontalScrollIndicator={false}
         pagingEnabled={true}
        >
             <View style={{
               flex: 1,
               height: totalheight,
               justifyContent: "space-around",
               alignItems: "center",
               width: totalwidth,
               backgroundColor: "#FF0000"
             }}>
             <TextInput
              style={{height: 80, fontSize: 20}}
              placeholder="placeholder"
              value={this.state.searchtext}
              onChangeText={(searchtext) => 
               this.setState({searchtext})}
              ref={input => { this.textInput = input }}
              returnKeyType="go"
             />
            <Text>{this.state.searchtext}</Text>
         </View>
      </ScrollView>
    </View>);
 }

onChangeText={(search_text) => this.setState({searchtext:search_text})}

试试这个，那可能会起作用。

当您使用 setState 时，我们提供一个 JSON 作为参数。请按照下面的代码。

<TextInput
  style={{height: 80, fontSize: 20}}
  placeholder="placeholder"
  value={this.state.searchtext}
  onChangeText={(searchtext) => this.setState({ searchtext: searchtext })} // <-- 
  ref={input => { this.textInput = input }}
 returnKeyType="go"
/>

如果它不起作用，请告诉我。

其它你可能感兴趣的问题
上一篇当 React 中的父状态发生变化时停止重新渲染子组件 下一篇React - 显示隐藏两个元素而不在页面加载时闪烁