Кнопка Material-UI в реагирует только на события onClick в пределах своего заполнения.

Question

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

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

Я обнаружил что-то действительно странное: когда я нажимаю кнопку сбоку (крайние левые / правые края и углы), она всегда работает, вызывается метод. Если вы щелкнете по центру кнопки, она вернется неопределенной.

Я сделал демо здесь, чтобы увидеть его в действии: https://codesandbox.io/embed/blue-field-f9hyq?fontsize=14

Вот пример функционального компонента и класса, которые включены в этот тест:

function ButtonList(props) {
  const classes = useStyles();

  const onClick = e => {
    props.onClick(e);
  };
  return (
    <Button
      variant="contained"
      className={classes.button}
      name="createEvent"
      onClick={e => onClick(e)}
    >
      Create Event
    </Button>
  );
}

class App extends Component {
  handleClick = e => {
    if (e.target.name === "createEvent") {
      console.log("event clicked");
    }
  };
  render() {
    return (
      <div className="row">
        <ButtonList onClick={e => this.handleClick(e)} />
      </div>
    );
  }
}

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

Answer 1

Это потому, что материал отображает диапазон внутри кнопки, у которой нет имени атрибута.

<button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-contained" tabindex="0" type="button" name="createEvent">
  <span class="MuiButton-label">
    Create Event
  </span>
  <span class="MuiTouchRipple-root"></span>
</button>

А у вашего обработчика события click есть условие на атрибут name элемента click.

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