1

我需要一些帮助来了解我正在进行的反应/回流模式，如果它可以接受的话。

我有一个表单组件，它呈现几个表单元素，例如下面的示例。表单组件连接到 Reflux Store，表单元素的数据位于其中。

exports.InputField = React.createClass({
  getInitialState: function(){
    return {
      value: this.props.initialValue
    }
  },

  onChange: function(e){
    this.setState({value: e.target.value});

    // this is being throttled.
    Actions.SomeAction(this.props.name, e.target.value);
  },

  render: function(){
    var value = this.state.value;
    return (
      <input type="text" value={value} onChange={this.onChange}/>
    )
  }
})

在给定的示例中，用户在字段中输入，这反过来会触发 ajax 请求来保存数据，通常以状态码 200 响应。

  1. 完成后我应该this.trigger在我的商店里吗？这将导致setState在每次去抖动按键时调用表单。那不好吗？

  2. 我是否可以从商店触发事件，例如Actions.FieldUpdated并在字段组件中收听？

有几个使用提交按钮更新事物的反应/回流示例，但我找不到任何使用 onChange 的示例。

4

1 回答 1

0

  1. 如果在服务器端更新数据时没有从商店触发，则意味着在发生错误时不会通知视图。在不了解您的用例的情况下，很难知道这是否是一件好事。你不应该担心调用 setState 太多次，这就是 React 的重点。调用 setState 意味着只渲染已更改的内容，因此通常成本不高。在您的情况下，当您触发时调用 setState 可能只是有点没用，因为您在输入内容发生更改之前调用它。

  2. 允许商店调度操作。如果您希望您的商店变得聪明，有时需要它。您可以考虑进行 API 调用的情况，但您首先必须将操作分派到另一个商店以获取授权令牌。避免它很好，但有时你别无选择。

于 2015-05-03T20:31:44.183 回答