React.js 官方资料摘记：状态提升_function render (input) { return '<input type="nam-优快云博客

本文链接：https://blog.youkuaiyun.com/YQXLLWY/article/details/73481063

本文通过简化React.js官方示例，详细解释了状态提升的概念。目标是创建两个输入框，一个输入框的变动会实时同步到另一个。实现方法是将输入框的状态和事件处理函数上提到父组件。代码展示从父组件传递状态到子组件，以及如何通过父组件控制子组件的更新，强调了子组件无法直接修改父组件状态的原则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

状态提升

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

先说明一下实现目标：

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

实现原理：

将两个输入框的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>