react双向绑定--骚气的es6

现在实下的react写法，最流行的莫过于两种，

1.React.createClass这种语法

2.class这种语法（es6）

那么要我说，最骚气的肯定是第二种es6的写法啦，那么今天就来讲一下用es6写法来实现的双向绑定

首先我们还是来看一下es5的双向绑定是怎么实现的

var InputControlES5 = React.createClass({
  propTypes: {
    initialValue: React.PropTypes.string
  },defaultProps: {
    initialValue: ''
  },// 初始化状态值
  getinitialState: function() {
    return {
      text: this.props.initialValue || 'placeholder'
    };
  },// 绑定事件
  handleChange: function(event) {
    this.setState({
      text: event.target.value
    });
  },render: function() {
    var text = this.state.text;
    return (
      <div>
        Type something:
        <input onChange={this.handleChange}
               value={text} />
        Write something:
        <p>{text}<p/>
      </div>
    );
  }
});

上面这个类就是一个最简单的双向绑定实现方式

下面我们再来看es6的写法

class InputControlES6 extends React.Component {
  constructor(props) {
    super(props);

    // 初始化 state
    this.state = {
      text: props.initialValue || 'placeholder'
    };

    // 在构造函数内必须先bind这个事件
    this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange(event) {
    this.setState({
      text: event.target.value
    });
  }
  
  render() {
    consot text = this.state.text;
    return (
      <div>
        Type something:
        <input onChange={this.handleChange}
               value={text} />
        Write something:
        <p>{text}<p/>
      </div>
    );
  }
}
InputControlES6.propTypes = {
  initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
  initialValue: ''
};

区别其实就在于一下几个点

1.getinitialState 与 constructor

2.在es6写法中必须在constructor函数中bind事件

还有一个必须牢记的共同点，

双向绑定的那个属性值，必须要初始化（切记）

原文地址：https://www.jb51.cc/react/305537.html