Метод прохождения с параметрами через реагирующие опоры?

Question

Im делает реагировать компонент, который создает несколько кнопок, но я не знаю, как обращаться действия в зависимости от которой нажата кнопка, это компонент:

var SingleChoiceGroup = React.createClass({ 
    render(){ 
     var numberOfButtons = this.props.numberOfButtons; 
     var prefix = this.props.prefix; 
     var buttons = []; 

     for(var i = 0;i<numberOfButtons;i++){ 
      buttons.push(
       <Button value={i} onClick={() => this.props.selectedItem(i)}>{prefix + " " + (i+1)}</Button> 
      ); 
     } 

     return(
      <div> 
       {buttons} 
      </div> 
     ) 
    } 
}); 

И это метод был я хочу, чтобы получить параметр:

var AnotherComponent = React.createClass({ 
    selectedDay(i){ 
     // Here I want to read the index parameter from the other component. 
    }, 

    render(){ 
     <SingleChoiceGroup selectedItem={() => this.selectedDay()} numberOfButtons={7} prefix={"Text"}/> 
    }  
}); 

Answer 1

В коде есть две проблемы. Первым здесь:

<SingleChoiceGroup selectedItem={() => this.selectedDay()} numberOfButtons={7} prefix={"Text"}/> 

Поскольку ваша selectedItem стрелка функция не принимает никаких аргументов, значение i передается ему SingleChoiceGroup теряется.

Вы могли бы решить эту проблему, изменив его selectedItem={i => this.selectedDay(i)}, но вместо того, передавая функцию, которая вызывает this.selectedDay, вы можете просто передать this.selectedDay сам, то есть:

<SingleChoiceGroup selectedItem={this.selectedDay} numberOfButtons={7} prefix={"Text"}/> 

Вторая проблема, так как Bartek отметил в своем Ответ: i в нашем цикле for является ссылкой на один и тот же объект на каждой итерации цикла, и поскольку его окончательное значение равно 7, это значение, которое обработчик события получает для каждой кнопки. Там более развернутая дискуссия по этой теме in this answer. TL; DR должен использовать let вместо var, чтобы цикл for каждый раз инициализировал новую переменную с блочной областью.

Вот оба этих изменений в рабочем сниппета:

const Button = props => <button type="button" {...props}/>; 
 

 
var SingleChoiceGroup = React.createClass({ 
 
    render(){ 
 
     var numberOfButtons = this.props.numberOfButtons; 
 
     var prefix = this.props.prefix; 
 
     var buttons = []; 
 

 
     for (let i = 0; i < numberOfButtons; i++){ 
 
      buttons.push(
 
       <Button key={i} value={i} onClick={() => this.props.selectedItem(i)}>{`${prefix} ${i+1}`}</Button> 
 
      ); 
 
     } 
 
     
 
     return <div>{buttons}</div>; 
 
    } 
 
}); 
 

 
var AnotherComponent = React.createClass({ 
 
    selectedDay(i){ 
 
     console.log('clicked %d', i); 
 
    }, 
 

 
    render(){ 
 
     return <SingleChoiceGroup selectedItem={this.selectedDay} numberOfButtons={7} prefix="Text"/> 
 
    }  
 
}); 
 

 
ReactDOM.render(<AnotherComponent/>, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
Click on us: <div id="container"></div>

Answer 2

В вашем использовании компонента SingleChoiceGroup let insetad из var в for цикле - в противном случае нажмите обработчики будет использовать последнее значение i который составляет 7 в вашем случае (почему? см. это SO answer для подробного объяснения замыканий в петлях for):

for(let i = 0;i<numberOfButtons;i++){ 
     buttons.push(
      <Button value={i} onClick={() => this.props.selectedItem(i)}>{prefix + " " + (i+1)}</Button> 
     ); 
    }