Как обработать onClick на дочерний компонент в родительском компоненте

Question

мой компонент приложения, как показано ниже:

class App extends Component {
  clickHandler = () => {
    console.log('click');
  }
  render() {
    return (
      <div className="App">
        <div onClick={this.clickHandler}>Test1</div>
        <Person onClick={this.clickHandler}>Test2</Person>
      </div>

    );
  }
}

А это мой компонент Person:

class Person extends Component {
    render() {
        return (
            <div>{this.props.children}</div>
        )
    }
}

Когда я нажимаю Test1, onClick работает и показывает щелчок на консоли,но когда я нажимаю Test2, onClick не работает.Как я обработать OnClick в родительском компоненте?я не хочу передавать клик на дочерний компонент.

Answer 1

Вам нужно передать onClick в <div> в Person.

onClick - это не специальная опора, которая везде работает в React. Единственными внутренними опорами являются key и children.Все остальное необходимо подключить вручную.

Причина, по которой ваш код не работает, заключается в том, что вы передаете onClick в Person, а в компонент Person, onClick простодругая опора.Сам по себе он ничего не делает, пока вы не передадите его компоненту, который понимает, что значит обрабатывать событие щелчка (что делают все встроенные компоненты в React).

Answer 2

Это должно работать.Почему ты не хочешь написать это так?Вы передаете это как опору ...

<div onClick={props.onClick}>Test</div>

Answer 3

Вот полное решение ... Оформить заказ: https://codesandbox.io/s/vjp200rj3

Модифицированная функция рендеринга в приложении.

render() {
    return (
      <div className="App">
        <div onClick={this.clickHandler}>Test1</div>
        <Person clickHandler={this.clickHandler}>Test2</Person>
      </div>
    );
  }

Модифицированная функция рендеринга в Person:

  render() {
    return <div onClick={this.props.clickHandler}>{this.props.children}</div>;
  }

Answer 4

class Person extends Component {
    render() {
        return (
            <div onClick={this.propes.onClick}>{this.props.children}</div>
        )
    }
}