Question

class Checkbox extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      checked: true
    }
  }
  changeClick()  {
    this.setState({checked: !this.state.checked})
  }
  render() {
    var chk;
    if(this.state.checked){
      chk='Checked';
    }else{
      chk='Unchecked'
    }
    return (
       <div>
         <h2>Checkbox is {chk}</h2>
         <input type='checkbox' onChange={this.changeClick} defaultChecked=
         {this.state.checked}/>
      </div>
  )
  }
}
ReactDOM.render(
  <Checkbox />,
  document.getElementById("root")
);

我是React的新手并试图学习ES2015，有人可以帮我解决这个问题，为什么State不会改变这个片段。

任何帮助将不胜感激，谢谢：）

Answer 1

您可以使用匿名函数绑定this

  changeClick = () =>  {
    this.setState((prevState)=>{return {checked:!prevState.checked}})
  }

另外，检查浏览器中的控制台以查看错误。然后你可以搜索错误的答案，这是一个非常常见的答案。

编辑：根据评论更新

Answer 2

问题是由于this内changeClick()不可用。这是函数内的 undefined 。为避免这种情况，您可以在构造函数

中绑定此方法

this.changeClick = this.changeClick.bind(this);

或

使用es6箭头功能

changeClick = () =>  {
    this.setState({checked: !this.state.checked})
  }

见下面给出的小提琴 https://jsfiddle.net/yxzyp7yq/?utm_source=website&utm_medium=embed&utm_campaign=yxzyp7yq

ReactJS：状态没有改变

2 个答案: