ReactJS - setState 到多个元素答案

【问题标题】：ReactJS - setState to multiple elementsReactJS - setState 到多个元素
【发布时间】：2015-08-13 16:14:03
【问题描述】：

我正在尝试将多个组件的状态 (actiu) 设置为 false，通过类引用它们。当我从一行中单击一个标签时，如何实现这一点，该行中所有元素的 actiu 状态变为 false？这是我的组件树：

有一些 Blade 模板语法可以生成每一行标签

var RespostesBox = React.createClass({
  render: function() {
    return (

<div className="form-group">
    <?php $zenbatu = 0; ?>
    @foreach($preguntes as $p)
        <div className="well">
            {{ $p->preg }}
            {{ $p->help }}
        </div>
        <?php $zenbatu++ ?>
        <?php for($j = 0; $j <= 10; ++$j) { ?>
            <LabelResp izena="resp{{ $zenbatu }}" balioa="{{ $j }}" />
        <?php } ?>
    @endforeach
</div>

    );
  }
});

var LabelResp = React.createClass({
    getInitialState: function() {
        return {actiu: false};
    },
    handleClick: function(event) {

        // 
        this.setState({actiu: true})

    },
    render: function() {
        return (
            <label className={this.state.actiu ? "radio-inline amgrd actiu" :"radio-inline amgrd"} onClick={this.handleClick}>
            <input type="radio" name={this.props.izena} value={this.props.balioa} className={this.props.izena} /> {this.props.balioa}
            </label>
        );
    }
});


React.render(
  <RespostesBox />,
  document.getElementById('lespreguntes')
);

提前感谢您的帮助！

【问题讨论】：

当您可以将数据 ($preguntes) 序列化为 JSON 并在 JS 中处理所有内容时，我不明白为什么要将 PHP + Blade 与 JavaScript 混合使用...（您是顺便说一句，还混合了英语、加泰罗尼亚语和巴斯克语；）

标签： javascript components reactjs setstate

【解决方案1】：

我建议您应该为 Row 创建另一个组件，该组件将是 LabelResp 组件的父组件和 ResosterBox 的子组件。然后在 ResosterBox 组件中设置 State 和 handleClick。

为了与行通信，您可以将每行的索引传递给 handleClick。也许这个doc可以帮助你

【讨论】：

【解决方案2】：

处理所有标签状态的最佳方法是让您的父 React 组件管理它们是否处于活动状态。这实际上是使用 React.js 的建议之一是尽可能地推动状态管理。

为了使用您的代码完成此操作，您需要一种方法来提醒RespostesBox 标签已通过点击处理程序中的回调属性激活。

当标签被激活时，盒子组件将传递处理程序以调用，然后从标签中添加和删除类。该属性可以简单地称为onActivate 或任何对您来说最有意义的名称：

var RespostesBox = React.createClass({
  highlightActiveLabel: function(labelIndex) {
    // Assuming you are using jQuery too
    $('.amgrd').removeClass('actui');
    $('#amgrd' + labelIndex).addClass('actui');
  },
  render: function() {
    return (

      <div className="form-group">
        <?php $zenbatu = 0; ?>
        @foreach($preguntes as $p)
          <div className="well">
           {{ $p->preg }}
           {{ $p->help }}
          </div>
          <?php $zenbatu++ ?>
          <?php for($j = 0; $j <= 10; ++$j) { ?>
            <LabelResp onActivate={this.highlightActiveLabel} izena="resp{{ $zenbatu }}" balioa="{{ $j }}" />
          <?php } ?>
        @endforeach
      </div>

    );
  }
});

您的标签组件在单击时会调用onActivate 属性。我还将添加一个 id 属性，以便我们可以定位父组件中的元素。

var LabelResp = React.createClass({
  handleClick: function(event) {

    // Make sure property exists
    if ( this.props.onActivate ) {
       this.props.onActivate(this.props.balioa);
    }

  }
  render: function() {
    return (
        <label id="amgrd{{this.props.balioa}}" className="radio-inline amgrd" onClick={this.handleClick}>
          <input type="radio" name={this.props.izena} value={this.props.balioa} className={this.props.izena} /> {this.props.balioa}
        </label>
    );
}
});

这应该允许您将类添加到您的活动标签，而无需每个人都知道它需要停用其他标签。

【讨论】：