React 状态提升

React 状态提升

复习：2019-1-22

需求：react是一个数据单向传值的框架，子组件不能直接给父组件传值。

如果内部多个子组件共同使用相同的数据，并且互相影响。那么可以将这部分共有的数据存放在父组件的属性中，将 handleChange 作为回调函数传递给子组件。不同子组件会更改某个参数，这部分参数会影响其他子组件的行为。确保父组件内部的数据改变会改变子组件的属性。

案例：公里和英里进行转换，总数是固定的，不同子组件需要根据单位进行转换，将数据存放在父组件中。

tips：在Chrome react 工具可以查看不同组件的传值，不需要每次console.log。

class Text extends React.Compontent {
  
  constrcutor(props) {
    super(props);
    this.state({
      lan: null,
      length: 0
    });
  }
  
  handleInputChange = (e) => {
    if (e.target.name === 'zh') {
      this.setState({
        lan: 'zh',
        length: e.target.value
      })
    }
    else if (e.target.name === 'en') {
      this,setState({
        lan: 'en',
        length: e.target.value
      })
    }
  }
  
  render() {
    const lan = this.state.lan;
    const chinese = lan === "zh" ? length : length * 0.5;
    const english = lan === "en" ? length : length * 2;
    return (
    	<div>{chinese}</div>
      	<div>{english}</div>
    );
  }
}

不管输入的是英语还是汉语的单位，那么长度会转化成为英语和汉语进行处理显示，实际上只有一个数据。