Передача параметра в обработчик событий в родительском классе из дочернего класса ReactJS - PullRequest
Новая
       3

Передача параметра в обработчик событий в родительском классе из дочернего класса ReactJS

2 голосов
/ 22 марта 2019

Я пытаюсь передать параметр обработчику событий в родительском классе, но у меня возникли некоторые трудности. Я провел много исследований и близок к ответу, но что-то не работает. Ниже я приведу основной гипотетический пример того, что я хотел бы сделать, но это не работает. 

class Parent extends React.Component {
       constructor(props){
           super(props);
           this.handleClick = this.handleClick.bind(this);
       }

       handleClick(i){
           return event => console.log(i);
       }

       render(){
          return <Child onClick={this.handleClick}></button>;
       }
}

class Child extends React.Component {
       render() {
            const myVar = 2;
            return <button onClick={this.props.onClick(myVar)}></button>;
       }
}

Я знаю, что реквизит onClick, который передается Child, не является функцией, поэтому я не могу передать параметры непосредственно ему. Каков наилучший способ сделать это? Спасибо за помощь!

Ответы [ 2 ]

2 голосов
/ 22 марта 2019

Сделайте следующее обновление вашего кода 

class Child extends React.Component{
       render(){
            const var = 2;
            return <button onClick={ () => {this.props.onClick(var)} }</button>;
       }
}

Более того, вам следует изменить рефакторинг следующего метода, используемого родительским компонентом.Вы проходите e без необходимости.

handleClick(i){
    console.log(i);
}

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

1 голос
/ 22 марта 2019

Вы не можете сделать 

handleClick(i){
           return (e => {console.log(i)});
       }

вместо этого попробуйте 

handleClick(i){
          console.log(i)
       }

и переместите обработку события туда, где она вызывается. Так что вместо 

<button onClick={this.props.onClick(var)}</button>

Вы хотите попробовать 

<button onClick={e => this.props.onClick(var)}</button>
...