React Native - React State（状态）

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。

一般来说，你需要在constructor中初始化state（译注：这是ES6的写法，早期的很多ES5的例子使用的是getInitialState方法来初始化state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法。

//当state发生变化时,会调用组件内部的render方法

class RNTalk extends Component {
  //点击按钮触发事件,更改状态
  _checkAction(){
    this.setState({
      isCheck: !this.state.isCheck,
    });
  }
  //定义初始化状态 isCheck
  constructor(props){
    super(props);
   this.state = {isCheck:false,};
  }
  render() {
    //根据当前状态 来显示对应的点击状态
    var textTitle = this.state.isCheck?'已选中':'未选中';
    return (
      <View style={styles.container}>
        <Button title = {textTitle} onPress = {()=>
          this._checkAction()
          }>
        </Button>
      </View>
    );
  }
}

需求:定义一个组件,将用户在输入框内输入的内容进行实时的显示

 _handleChange(text){
    this.setState({
      text: text,
    });
  }
  //定义初始化状态 isCheck
  constructor(props){
    super(props);
    this.state = {
      text: 'Useless Placeholder' ,
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <TextInput
        style={styles.inputContainer}
        onChangeText={(text) => this._handleChange(text)}
        value={this.state.text}
        />
        <Text>
          {this.state.text}
        </Text>
      </View>
    );
  }
}

 //ES5的写法
  var CheckButton = React.createClass({
    //定义初始状态
    getInitialState: function(){
      return {
        //在这个对象中设置的属性,将会存储在state中
        //默认状态,未选中
        isCheck: false
      }

    },
    //定义事件的绑定方法
    handleChange:function(){
      //修改状态值,通过this.state读取设置的状态值
      this.setState({
        isCheck: !this.state.isCheck
      });
    },
    render: function(){
      //根据状态值设置显示的文字
      //在JSX语法中,不能直接使用if,使用三目运算符
      var text = this.state.isCheck ? "已选中":"未选中";
      return(
        <div>
        <input type="checkbox" onChange={this.handleChange} />
        {text}
        </div>
      );
    }
  });

  ReactDOM.render(
    <CheckButton />,
    document.getElementById("container")
  );

注意：
1.避免在组件内部修改 this.props，请把props 当作是只读的。
2.使用this.setState来设置状态，而不要使用this.state直接修改状态

• github Demo 代码