ReactJS - setState 到多个元素

Posted 2023-02-23

【中文标题】ReactJS - setState 到多个元素

【英文标题】：ReactJS - setState to multiple elements

【发布时间】：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 混合使用...（您是顺便说一句，还混合了英语、加泰罗尼亚语和巴斯克语；）

【参考方案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="amgrdthis.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>
    );

);

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