2

我试图将多个组件的状态（actiu）设置为 false，通过类引用它们。当我从一行中单击一个标签时，如何实现这一点，该行中所有元素的活动状态都变为 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')
);

在此先感谢您的帮助！

4

2 回答 2

0

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

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

于 2015-05-31T01:21:56.627 回答
0

处理所有标签状态的最佳方法是让您的父 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>
    );
}
});

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

于 2015-05-31T01:27:35.200 回答