Question

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

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

Sliders是具有一组输入的组件，应通过父Dashboard州转移到Calculator。

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

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()被触发，因此Sliders的状态已设定。但是，它不是＆＃34;转移＆＃34;将父母Calculator称为＆＃39; cars＆＃39;。因此，Calculator的状态未更新=＆gt; Dashboard状态也未被描述。

如何在幻灯片和信息中心之间共享计算器的父状态？

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

Answer 1

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

在您的情况下，cars应为Calculator,状态，Slide和Dashboard应仅检索cars作为道具。如果输入发生更改，Sliders应通知Calculator有关更改的信息，以便更新其状态并重新呈现（这会导致Sliders和Calculator更新）：< / p>

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

尽可能少的组件应该具有状态和状态应尽可能高在树中。另请参阅Props in getInitialState Is an Anti-Pattern

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中你想拥有一个或几个＆＃34; smart＆＃34;组件，处理状态和＆＃34;哑＆＃34;组件。＆＃34; smart＆＃34;组件将状态转移到＆＃34; dumb＆＃34;零件。还会注入事件处理程序，就像你的情况一样，是一个改变汽车数量的处理程序。您的计算器是您的智能组件。它还应该具有处理状态变化的功能。

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

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

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}
/>

并更改handleInput组件中的Slider功能：

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

在子组件之间共享父状态＆＃39;状态？

3 个答案: