在子組件的狀態之間共享父狀態？

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);
},