繁体   English   中英

React Native按钮不会更改状态

[英]React Native button doesn't change the state

按代码中指定的按钮后,应用程序的状态不会更改。

import React from 'react'
import { View, Text, TextInput, Button} from 'react-native'

export default class App extends React.Component {
  constructor() {
    super()
    this.state = {
      text: '',
      displayText: true
    }
  }

  render() {
    return (
      <View>
      <TextInput
        onChangeText={(text) => this.setState({text})}
      />
      <Button
        onPress={(prevState) => this.setState({displayText: !prevState.displayText})}
        title="Display"
      />
      {this.state.displayText ? <Text>{this.state.text}</Text> : null}
      </View>
    )
  }

}

如果修改了传递给onPress的函数,以便将displayText更改为false,则它将按预期工作(隐藏文本)。 问题很可能出在这部分。

<Button
        onPress={(prevState) => this.setState({displayText: !prevState.displayText})}
        title="Display"
/>
<Button
  onPress={(prevState) => this.setState({displayText: !prevState.displayText})} 
  title="Display"
/>

是错误的,prevState参数来自setState作为函数,而不是来自onPress事件:)

应该是

<Button
  onPress={() => this.setState({displayText: !this.state.displayText})} 
  title="Display"
/>

要么

<Button
  onPress={() => this.setState(prevState => {displayText: !prevState.displayText})} 
  title="Display"
/>

尝试这个

<Button
        onPress={() => this.setState({displayText: !this.state.displayText})}
        title="Display"
/>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM