在子组件的状态之间共享父状态？

Question

学习React，我正在构建一个简单的计算器。 组件模型是：

- Calculator
  - Sliders (input[ref=cars])
  - Dashboard (p {this.state.cars})

Sliders是具有一组输入的组件，应通过父Calculator状态传输到Dashboard 。

我的目标是在Sliders的输入组件更改中使Dashboard状态值更改。

var Calculator = React.createClass({
  getInitialState: function() {
    return {
      cars: 0
    };
  },
  render: function () {
    return (
      <div className="calculator">
        <Sliders
          cars={this.state.cars}
        />
        <Dashboard
          cars={this.state.cars}
        />
      </div>
    )
  }
});

var Dashboard = React.createClass({
  getInitialState:function () {
    return {
      cars: this.props.cars
    }
  },
  render: function () {
    return (
      <div>
        <h1>Dashboard</h1>
        <p>Cars: {this.state.cars}</p>
      </div>
    )
  }
})

var Sliders = React.createClass({
  getInitialState: function() {
    return {
      cars: this.props.cars
    };
  },
  handleInput: function () {
    var state = {
      cars: this.refs.cars.value
    }
    this.setState(state);
  },
  render: function () {
    return (
      <div className="sliders">
        <input type="text" ref="cars" onChange={this.handleInput} value={this.state.cars}/>
      </div>
    )
  }
})

正如我handleInput() ， handleInput()被触发，因此设置了Sliders状态。 但是，它并没有“转移”到父Calculator的状态为“汽车”。 所以， Calculator的状态没有更新=> Dashboard状态也没有更新。

如何在Sliders和Dashboard之间共享Calculator的父状态？

我知道，在SO上有很多类似的问题，但很难找到具体的有用案例，特别是当你在React中完成noob时。 所以，抱歉复制。

Answer 1

组件不共享状态。 但是，一个组件的状态可以成为另一个组件的支柱。

在您的情况下， cars应该是Calculator,的状态Calculator,而Slide和Dashboard应该只检索cars作为道具。 如果输入发生变化， Sliders应通知Calculator有关更改，以便它可以更新其状态并重新呈现（这会导致Sliders和Calculator也更新）：

var Calculator = React.createClass({
  getInitialState: function() {
    return {
      cars: 0
    };
  },

  onUpdate: function (cars) {
    this.setState({cars});
  },

  render: function () {
    return (
      <div className="calculator">
        <Sliders
          cars={this.state.cars}
          onUpdate={this.onUpdate}
        />
        <Dashboard
          cars={this.state.cars}
        />
      </div>
    )
  }
});

var Dashboard = React.createClass({
  render: function () {
    return (
      <div>
        <h1>Dashboard</h1>
        <p>Cars: {this.props.cars}</p>
      </div>
    )
  }
})

var Sliders = React.createClass({
  handleInput: function (event) {
    this.props.onUpdate(event.target.value);
  },

  render: function () {
    return (
      <div className="sliders">
        <input type="text" ref="cars" onChange={this.handleInput} value={this.props.cars}/>
      </div>
    )
  }
})

尽可能少的组件应该具有状态和状态应该尽可能高的树。 另请参见getInitialState中的道具是反模式

Answer 2

将父母作为道具传递给滑块，你不需要汽车作为滑块中的状态。

这是一种做法，但FelixKing的答案更好。

var Calculator = React.createClass({
  getInitialState: function() {
    return {
      cars: 0
    };
  },
  handleInput: function () {
    var state = {
      cars: this.refs.cars.value
    }
    this.setState(state);
  },
  render: function () {
    return (
      <div className="calculator">
        <Sliders
          cars={this.state.cars} parent={this}
        />
        <Dashboard
          cars={this.state.cars}
        />
      </div>
    )
  }
});

var Dashboard = React.createClass({
  getInitialState:function () {
    return {
      cars: this.props.cars
    }
  },
  render: function () {
    return (
      <div>
        <h1>Dashboard</h1>
        <p>Cars: {this.state.cars}</p>
      </div>
    )
  }
})

var Sliders = React.createClass({
  getInitialState: function() {
    return {};
  },
  handleInput: function (value) {
    this.props.parent.handleInput(this.refs.cars.value);
  },

  render: function () {
    return (
      <div className="sliders">
        <input type="text" ref="cars" onChange={this.handleInput} value={this.props.cars}/>
      </div>
    )
  }
})

Answer 3

在React中，您希望拥有一个或多个“智能”组件，它们处理状态和“哑”组件。 “智能”组件将状态转移到“哑”组件。 还会注入事件处理程序，就像你的情况一样，是一个改变汽车数量的处理程序。 您的计算器是您的智能组件。 它还应该具有处理状态变化的功能。

handleCarsChange: function( newAmount ) {
  this.setState({ cars: newAmount });
},

也不要从props获得初始状态（ 更多信息 ）。 道具可以更改，直接在渲染函数中使用它们，如下所示：

var Dashboard = React.createClass({
  render: function () {
    return (
      <div>
        <h1>Dashboard</h1>
        <p>Cars: {this.props.cars}</p>
      </div>
    )
  }
});

或者使用React 14组件函数语法：

var Dashboard = function(props) {
    return (
      <div>
        <h1>Dashboard</h1>
        <p>Cars: {props.cars}</p>
      </div>
    );
};

最后但并非最不重要的是给Sliders组件一个处理状态更改的处理函数：

<Sliders
  cars={this.state.cars}
  handleCarsChange={this.handleCarsChange}
/>

并更改Slider组件中的handleInput函数：

handleInput: function(value) {
  this.props.handleCarsChange(this.refs.cars.value);
},