React Material-UI - флажок Событие onChange не запускается

Question

Попытка использовать флажок Material UI. Довольно просто можно подумать? Ну, флажок не переключается. Оказывается, событие onChange не запускается даже внутри компонента (я помещаю логи в пакет node_modules).

      <Checkbox
        checked={this.state.isTrue}
        onChange={e => {
          console.log(e.target.checked);
          this.setState({isTrue: e.target.checked});
        }} />

Довольно просто, верно? Но console.log никогда не срабатывает. Я могу взломать его, поместив обработчик событий onClick на компонент и переключив состояние вручную, но это глупо. У кого-нибудь есть подсказка?

API находится по адресу https://material -ui.com / api / checkbox / # checkbox . Не ракетостроение.

Answer 1

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

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

import React, { Component } from "react";
import { render } from "react-dom";
import Checkbox from "material-ui/Checkbox";

class App extends Component {
  constructor() {
    super();
    this.state = {
      isTrue: false
    };
  }
  render() {
    return (
      <div>
        <Checkbox
          checked={this.state.isTrue}
          onChange={e => {
            console.log(e.target.checked);
            this.setState({ isTrue: e.target.checked });
          }}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Answer 2

Ваш код выглядит нормально, возможно, что-то еще не так. Однако, для быстрого POC, вы можете обратиться к этой ссылке . Это то же самое, что и в официальной демонстрации документации для пользовательского интерфейса, чтобы вы могли легко связать ее.

Кроме того, вы можете сравнить код с приведенным ниже

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

export default function Checkboxes() {
  const [isTrue, setIsTrue] = React.useState(false);


  return (
    <div>
      <Checkbox
        checked={isTrue}
        onChange={e=> {
          console.log("target checked? - ", e.target.checked);
          setIsTrue(e.target.checked)
        }}
        value="checkedA"
        inputProps={{
          'aria-label': 'primary checkbox',
        }}
      />
    </div>
  );
}

Вот скриншоты для проверки

Ссылки: https://material -ui.com / компоненты / флажки /