如何实现反应回调答案

【问题标题】：How can I implement a react callback如何实现反应回调
【发布时间】：2016-11-24 01:19:57
【问题描述】：

我对反应很陌生，我正在处理注册页面复选框元素

下面是Choice组件的实现，

const ChoiceItem = ( { options, itemId, selectedIndex, onChange } ) => (
  handleChange: function(checked){
    const value = [];
    options.map( option, i ) => (
      value[ i ] = checked;
    )

  },
  <Card>
    {
      options
      .map( ( option, i ) => (
        <Checkbox
          id={ `Choiceitem-checkbox-${ i }-${ itemId }` }
          key={ i }
          label={ option.text }
          style={ styles.checkbox }
          value={ '' + i }
          onChange={ ( checked ) => onChange( itemId, [ i ], checked ) }
        />
      ) )
    }
  </Card>
);

我想要在这里做的是遍历选项并将那里的值放入名为 value 的数组中，然后在注册表单中回调 handleAnswerChange 并在那里设置值。谁能告诉我如何存档？
谢谢。

【问题讨论】：

在您的代码 sn-p 中，您没有将 this 绑定到您的 this.handleAnswerChange。即您应该将this.handleAnswerChange = this.handleAnswerChange.bind(this) 放入您的constructor。否则，this.setState() 不适合您的情况。顺便说一句，在 renderItem() 中，您没有将 props 传递给它。
@andre 因为handleAnswerChange 是使用自动绑定的箭头函数定义的。这确实需要在 babel 中使用至少第 2 阶段。
@kwelch 哎呀，对不起，我没注意到他/她使用了箭头功能，我的错。

标签： reactjs checkbox callback

【解决方案1】：

听起来对您来说最好的解决方案是双向绑定。您可以查看有关添加双向绑定的 react 文档。

react two way binding.

另一种选择是使用 jquery

【讨论】：

【解决方案2】：

您实际上非常接近拥有这个。我会在MultipleChoiceItem 中更新您的handleChange：

handleChange = (index) => (checked) => {
  const newValues = options.map((option, i) => {
    // if it is the changed returned the new state
    // otherwise just return the current value
    return index === i ? checked : option;
  });
  this.props.onChange(this.props.itemId, newValues);
};

然后在你的渲染里面我会设置onChange:

onChange={this.handleChange(i)}

这应该会在每次单击复选框时更新MyRegisterForm 的状态。

【讨论】：

感谢您的回复。在我的情况下，有 2 个复选框，有没有办法在 handleChange 函数中发送一个数组。在上面的例子中，只有当复选框被选中时才会设置值？但我想在每次更改时在数组中设置 2 个复选框值。
我实际上需要将选中的复选框的索引发送到注册表以保存为答案。我有点卡在那里:(
传入的i 允许您将其附加到数组中的每个复选框。这将在选中和取消选中时调用。变量checked 将保持检查状态，我基于你的sn-p。