Как использовать onClick для запуска двух функций реагировать - PullRequest
0 голосов
/ 05 июля 2018

Совершенно новый для React Js, так что терпите меня ...

Я использую onClick в дочернем компоненте, чтобы изменить состояние родительского компонента. Родительским состоянием является логическое значение, которое, в свою очередь, используется для включения и выключения класса на отдельном элементе из того, по которому щелкнули. Примерно так:

In Parent.js (только соответствующий код):

constructor(props) {
    super(props);

    this.state = {
        elementOpen: false;
    }

    this.handleClick = this.handleClick.bind(this);
}

handleClick() {
    this.setState({
        elementOpen: !this.state.bucketListOpen
    })
}

render() {
     return (
         <Child 
             className = {this.state.elementOpen ? "open" : "closed"}
             toggleClassName = {this.handleClick}
         />
     )
}

В Child.js (только соответствующий код):

render() {
     return (
         <div>
             <div className={this.props.className}>Test</div>
             <a onClick={this.props.toggleClassName}>Click Me</a>
         </div>
     )
}

... и это прекрасно работает. Нет проблем. Проблема возникает, когда я хочу переместить {this.props.toggleClassName} в дочернем компоненте в функцию обработки (причина в том, что я могу запустить более одного события при нажатии). Короче перестает работать.

Я попытался создать метод в компоненте Child и поместить в него метод следующим образом:

handleClassSwitch() {
    return this.props.toggleClassName;
}  

render() {
    return (
         <div>
             <div className={this.props.className}>Test</div>
             <a onClick={this.handleClassSwitch}>Click Me</a>
         </div>
    )
}

... но, к сожалению, это не работает, и я в тупике. Наверное, действительно очевидно, но я борюсь здесь. Любая помощь приветствуется.

Ответы [ 3 ]

0 голосов
/ 05 июля 2018

В настоящее время вы не привязываете свою handleClassSwitch функцию так же, как вы используете handleClick в вашем Parent компоненте.

Это будет работать, если вы также связываете его с компонентом Child. Вы также можете превратить handleClassSwitch в функцию со стрелкой, если хотите.

class Child {
  handleClassSwitch = () => {
    this.props.toggleClassName();
  };

  render() {
    return (
      <div>
        <div className={this.props.className}>Test</div>
        <a onClick={this.handleClassSwitch}>Click Me</a>
      </div>
    );
  }
}
0 голосов
/ 05 июля 2018

Кажется, что вы на самом деле больше не вызываете toggleClassName. Когда вы щелкаете тег a, он вызывает handleClassSwitch, который возвращает ссылку на toggleClassName вместо ее вызова. Попробуйте написать это вместо:

handleClassSwitch = () => {
   this.props.toggleClassName();
}  

Обратите внимание, что я использую синтаксис => для привязки handleClassSwitch, чтобы он имел доступ к this

0 голосов
/ 05 июля 2018

Вы можете вызывать несколько функций внутри handleClassSwitch, но вам нужно вызывать эти методы, используя ().

Как это:

handleClassSwitch() {
   this.props.toggleClassName();    // notice ()
   function2();
   function3();
} 

Примечание: Не забудьте связать метод handleClassSwitch внутри дочернего компонента, либо связать внутри конструктора, либо использовать функцию стрелки.

Проверьте этот фрагмент на разницу между этими двумя:

function abc() {
  console.log('calling abc');
  return 1;
}

console.log('without () => ', abc);
console.log('with () => ', abc());
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...