React.js 官方资料摘记：状态提升

来源：互联网发布：淘宝有什么好的鞋店编辑：程序博客网时间：2024/06/06 03:34

状态提升

官网上那个例子很复杂，所以我在这里做了简化，说明的内容是一样的。

先说明一下实现目标：

有两个输入框，当一个输入框输入内容时，另一个自动输入相同内容

实现原理：

将两个输入框的value属性的值绑定到父类中去
将两个输入框的onChange事件交由父类进行处理

看不懂也没有关系，直接看代码就能弄懂了。

首先是基本的输入组件：

class InputNumber extends React.Component{      handleChange=()=>{        this.props.handleChange(event.target.value);      }      render(){        const inputNumber=this.props.number;        return(          <div>            <input type="text" value={inputNumber} onChange={this.handleChange} />          </div>        );      }    }

上面组件中的input设置了value和onChange都是父级组件传递进来的。

接着写调用该组件的父级组件：

class Caculator extends React.Component{      constructor(props){        super(props);        this.state={number:""}      }      handleChange=(number)=>{        this.setState({number:number});      }      render(){        const number=this.state.number;        return (          <div>            <InputNumber number={number} handleChange={this.handleChange} />            <InputNumber number={number} handleChange={this.handleChange} />          </div>        );      }    }

这里我们把两个InputNumber组件的value都绑定到了父组件Caculator中，并且将他们的onChange事件设置成了同一个事件，这时任何一个组件发生改变都会改变state的值，而state值的改变也会导致重新渲染页面，即input的value值。

上面代码的运行顺序是：

InputNumber设置了value和onChange，只不过这两个值都在自于父组件传递进来的
父组件将两个组件的value值保存在state中，并设置了子组件要调用的onChange事件对应的函数

这里思考一下，我们能不能在子组件InputNumber中设置数据处理呢？答案是不行！因为子组件不能操作父组件的state值。

下面我把全部代码贴出来，方便一起查看：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <title>Hello React!</title>    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>  </head>  <body>    <div id="root"></div>    <script type="text/babel">    {/*base input component*/}    class InputNumber extends React.Component{      handleChange=()=>{        this.props.handleChange(event.target.value);      }      render(){        const inputNumber=this.props.number;        return(          <div>            <input type="text" value={inputNumber} onChange={this.handleChange} />          </div>        );      }    }    {/*controller component*/}    class Caculator extends React.Component{      constructor(props){        super(props);        this.state={number:""}      }      handleChange=(number)=>{        this.setState({number:number});      }      render(){        const number=this.state.number;        return (          <div>            <InputNumber number={number} handleChange={this.handleChange} />            <InputNumber number={number} handleChange={this.handleChange} />          </div>        );      }    }    ReactDOM.render(      <Caculator />,      document.getElementById("root")    );    </script>  </body></html>

阅读全文

0 0