如何从函数传递变量以在函数中呈现函数

Question

我是新人的反应。按照教程，他们引入状态以查找是否选中了复选框。但我想以这种方式做到这一点：

<script type="text/babel">
  var Checkbox = React.createClass({
    change: function(){
      var msg;
      var val= document.getElementById('check').checked;
      if(val==true){
        msg = 'checked';
      }else{
        msg = 'Not checked';
      }
    },
    render: function(){
      return(<div>
          <input onChange={this.change} id="check" type="Checkbox" />
          <p>Checkbox is {this.msg}.</p>
        </div>);
    }
  });
  ReactDOM.render(<Checkbox/>, document.getElementById('container'));
</script>

所以，问题是我无法将变量“msg”传递给渲染函数。

Answer 1

如果要在UI中呈现消息，则应使用setState函数将msg设置为状态，以便重新呈现。

对于不需要重新渲染的任何其他情况，可以在构造函数中将变量创建为类变量，并在任何函数中使用。

constructor(props){
super(props);
this.myVariable='';
}