используя простой компонент (немой), чтобы создать список кнопок и использовать родительский метод

Question

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

У меня очень простой класс:

export default class Dashboard extends React.Component {
  constructor(){
    super();
  }
  HandleClick = (e) => {
    if (e.name === "createEvent") {
      console.log('event clicked');
    }
    console.log(e.name);
  }
  render() {
    return(
      <div className="row">
        <ButtonList onClick={this.HandleClick}/>
      </div>
    )
  }
}

и затем у меня есть простая функция вне класса, которая создает список кнопок:

function ButtonList(props) {
  return (
    <button name="createEvent" onClick={props.HandleClick}>Create Event</button>
  )
}

идея заключалась в том, чтобы вместо того, чтобы иметь так много вещей внутри одного суперкласса, я хотел отделить простуюфункциональность, например, кнопка или команда список, если хотите, этот щелчок opon в конечном итоге изменит состояние панели навигации.

Я не уверен, как мне вернуть эти значения кнопки или, кроме этого, передать параметр в кнопку из дочерней опоры.

Например, вместо того, чтобы делать HandleClick = (e) => и фактически искать параметр, как бы я передал его в дочернюю функцию, где он используется (если бы было еще много кнопок)?

Answer 1

Это то, что вы должны делать вместо этого:

В родительском компоненте вы можете использовать функции стрелок для передачи параметров в handleClick. Это позволит вам прослушивать события вашего дочернего компонента ButtonList с параметрами, переданными в метод.

Кроме того, если вы хотите получить доступ к атрибуту name вашей кнопки, вам следуетвызов event.target.name, так как name является частью свойства target интерфейса Event .

export default class Dashboard extends React.Component {

  constructor(){
    super();
  }

  handleClick = (e) => {
    if (e.target.name === "createEvent") {
      console.log('event clicked');
    }
    console.log(e.target.name);
  }

  render() {
    return(
      <div className="row">
        <ButtonList onClick={(e) => this.handleClick(e)} />
      </div>
    )
  }
}

А на функциональном компоненте ButtonList вы должны передать событие onClick реквизиту onClick, который был определен как часть компонента ButtonList.

function ButtonList(props) {

  const onClick = (e) => {
    props.onClick(e);
  };

  return (
    <button name="createEvent" onClick={(e) => onClick(e)}>Create Event</button>
  )
}

Я создал демо поверх здесь .