Question

我有三个组件（所有组件当前都拥有state，因为它们各自处理输入字段的state。我正在读一个共同的组件应该拥有该状态。

所以我有这个共同的组成部分：

var UnitConverter= React.createClass({

  render: function(){
     return(
        <div>
            <Temperature/>
            <Length/>
            <Mass/>
        </div>
    )
   }
});

然后是Temperature，Length和Mass组件：https://jsfiddle.net/Amidi/fvgv5rb2/1/我不确定这么多组件是否都属于{{1 }}。我如何准确地集中state？

Answer 1

要集中处理状态，您可以将回调传递给组件，然后将值传递给UnitConverter，如下所示：

var UnitConverter= React.createClass({
  getInitialState: function() {
    return { temperature: 0, length: 0, mass: 0 }
  }

  render: function(){
     return(
        <div>
            <Temperature value={this.state.temperature} onChange={this.handleTemperatureChange} />
            <Length value={this.state.length} onChange={this.handleLengthChange} />
            <Mass value={this.state.mass} onChange={this.handleMassChange} />
        </div>
    )
   }

   handleTemperatureChange: function(temperature) {
     this.setState({ temperature: temperature })
   }

   handleLengthChange: function(length) {
     this.setState({ length: length })
   }

   handleMassChange: function(mass) {
     this.setState({ mass: mass })
   }
});

应该只有一个组件拥有状态？

1 个答案: