Переключатель React не проверяется, но работает нормально - PullRequest
Новая
       42

Переключатель React не проверяется, но работает нормально

0 голосов
/ 15 октября 2018

У меня есть следующий компонент реагирования, который имеет две кнопки-переключателя.

export default class DemoApp extends Component {
  constructor(props) {
    super(props);
    this.onThemeChange = ::this.onThemeChange;
    this.state = {
      theme: "dark"
    };
  }

  onThemeChange(e) {
    this.setState({
      theme: e.target.value
    });
  }

  render() {
    return (
      <Fragment>
                <div className="radio">
                  <label htmlFor="light-theme">
                    <input
                      type="radio"
                      value="light"
                      onChange={this.onThemeChange}
                      checked={this.state.theme === "light"}
                      name="theme"
                      id="light-theme"
                    />
                    light
                  </label>
                </div>
                <div className="radio">
                  <label htmlFor="dark-theme">
                    <input
                      type="radio"
                      value="dark"
                      name="theme"
                      checked={this.state.theme === "dark"}
                      onChange={this.onThemeChange}
                      id="dark-theme"
                    />
                    Dark
                  </label>
                </div>
      </Fragment>
    );
  }
}

Функционально переключатели работают нормально.Но они проверяются, т.е. проверяется только значение по умолчанию, и оно остается проверенным, даже если значение состояния изменяется.Я попробовал с defaultChecked prop тоже следующим образом, но не повезло. 

<div className="radio">
  <label htmlFor="dark-theme">
    <input
      type="radio"
      value="dark"
      name="theme"
      checked={this.state.theme === "dark"}
      onChange={this.onThemeChange}
      id="dark-theme"
    />
    Dark
  </label>
</div>

Может кто-нибудь помочь мне выяснить, что я делаю неправильно?

...