Question

首先，我对本机反应非常陌生，并尝试自己学习并尝试使用它。

我有一个变量名mbackgroundColor。我在构造函数中使用默认值对其进行了初始化。

constructor(props) {
super(props)
this.state = {
    mbackgroundColor: 'green'
};}

我在JSX中有一个按钮，当我单击它时，我会成功显示警报。

<View style={
[{
height: 50,
}, {backgroundColor : this.state.mbackgroundColor}]
}>
<Button onPress={this.onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

现在，当我单击按钮时，我还想将bbackgroundColor的状态设置为白色，然后 也更新视图 。 这是没有发生的事情 。

onPressLearnMore() {
Alert.alert('on Press!');
this.setState = {
  mbackgroundColor: 'white'
  };}

我已附上代码 here。

感谢帮助：）！

Answer 1

更改代码

发件人

onPressLearnMore() {
Alert.alert('on Press!');
this.setState = {
  mbackgroundColor: 'white'
  };}

收件人

onPressLearnMore() {
this.setState({mbackgroundColor: 'white'},()=>Alert.alert('on Press!')) 
}

Answer 2

只需设置如下状态：

<div class="calendar">
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
</div>

代替使用：

this.setState({mbackgroundColor: 'white'})

Answer 3

在this中的

onPressLearnMore并不引用当前的类，这会引发错误，要使此类正常工作，请将代码更改为以下内容。

onPressLearnMore = () => {

  Alert.alert('on Press!');

  this.setState({
    mbackgroundColor: 'white',
  });

}

要更改状态值，我们使用this.setState({})而不是this.state = {}的格式

.setState() tutorial

snack example

您甚至不需要构造函数

更改

constructor(props) {
  super(props)
  this.state = {
    mbackgroundColor: 'green'
  };
}

至

export default class App extends Component<Props> {

  state = {
    mbackgroundColor: 'green',
  };

  onPressLearnMore = () => {

    Alert.alert('on Press!');
    this.setState({
      mbackgroundColor: 'white',
    });

  };
  ....

setState不更新React Native中的样式

3 个答案: