Question

刚开始使用React，试图替换一个功能齐全但非常复杂的jQuery页面。我正在执行此任务，因为我需要添加的其他功能以及继续使用纠结的jQuery网络将变得站不住脚。

此页面是各种订单，包含与目的地相关的多个目的地和任务。我所读到的关于React的一切都告诉我在最高的包含级别保持状态，基本上是我的OrderCreation / App级别 - 对吗？

所以，现在我有一个DestinationInput组件，通过mixin处理GoogleAutocomplete并具有可切换的编辑状态（在选择自动完成位置后，它变为一对h4 / h6节点 - 单击此将交换回输入字段）。

我在同一个App中有一些这样的DestinationInput组件 - 我不希望每个DestinationInput组件实例都有1个destinationUpdated回调 - 特别是因为这将成为超时的动态实例数。

我认为正确的方法是向子节点传递一个通用的回调方法prop，并让子节点将标识符以及新值传回父节点。我用钥匙吗？裁判？我真的没有看到有关如何处理更新父状态的多个子实例的最佳实践。

我在想什么？

var OrderCreate = React.createClass({
   getIntitialState = function () {
      return {
         destinations: []
      }
   },

   updateDestination = function(id, place) {
      this.setState(destinations[id], place);
   },

   render = function() {
      return (
         for (var i=0; i < this.state.destinations.length; i++) {
            <DestinationInput key={ i }
                              place={this.state.destinations[i]} 
                              onChange={this.updateLocation} />
         };
      );
   }
});

var DestinationInput = React.createClass({
   mixins = [GoogleAutocompleteMixin],
   getIntitialState = function () {
      return {
         text: this.props.text
      };
   },

   getDefaultProps = function() {
      return {
          text: ""
      };
   },

   handleChange = function(event) {
       this.setState({text: event.target.value });
   },

   placeSelected = function(place) {
      this.props.onChange(this.props.key, place);
   },

   render = function() {
      return (
          <input onChange={ this.handleChange } value={ this.state.text } />
      );
   }
});

Answer 1

Flux是一种在内存中实现数据存储的客户端方法，因此它完全不知道服务器上发生的任何事情。

我不确定你到底发生了什么，但我认为你只是在询问是否将功能传递给孩子是一个好主意。是的，非常好。

为简洁起见，我试图将重要的函数包含在内。

class Button extends React.Component {
  onClick() {
    this.props.onClick( this.props.id )
  }

  render() {
    return <Button onClick={ this.onClick.bind( this ) }>Click me</button>
  }
}

class Parent extends React.Component {
  onDoStuff( stuff ) {
    console.log( stuff ) // comes from each button
  }

  render() {
    return (
      <div>
        <Button id="number1" onClick={ this.onDoStuff } />
        <Button id="number2" onClick={ this.onDoStuff } />
      </div>
    }
  }
}

Parent.onDoStuff被传递给Button组件，其中处理程序最终将附加到DOM节点，该节点将解析为调用onDoStuff（this.props.onClick）并返回父组件的相关数据。从那里你可以决定你需要做什么。

处理多个组件实例的回调

1 个答案: