ReactJS - setState для нескольких элементов

Question

Я пытаюсь установить состояние (actiu) из нескольких компонентов в false, ссылаясь на них через класс. Как я могу достичь этого, когда я нажимаю ярлык из строки, состояние всех элементов в строке меняется на false? actiu. Вот мой компонент дерево:

Существует несколько клинка шаблонного синтаксиса, который генерирует каждый ряд меток

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') 
); 

Заранее спасибо за помощь!

Answer 1

Я предлагаю вам создать другой компонент для Row, который будет родителем компонента LabelResp и дочерними элементами ResposterBox. Затем вы устанавливаете State и handleClick в компоненте ResposterBox.

Чтобы связывать строки wirh, вы можете передавать индекс каждой строки в handleClick. Возможно, это doc может помочь вам

Answer 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> 
    ); 
} 
}); 

Это должно позволить вам добавлять классы к вашей активной метке, чтобы каждый из них не знал, что необходимо деактивировать другие ярлыки.