reactjs - Material UI Switch onChange 处理程序不起作用

Question

我已经实现了两个材质 ui 开关，它们应该更新状态中的属性，但是它们的 onChange 处理程序似乎不起作用，因为属性没有得到更新（但是我能够翻转开关的控件）。预期的行为是当我打开/关闭开关并单击保存时，状态中的属性会发生变化。有关开关 api 的参考，请访问此链接 - https://material-ui.com/components/switches/#Switches.js

这是我已经实施的。

export class SwitchNotifications extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      email_notification_enabled: false,
      app_notification_enabled: false
    };
  }

  componentDidMount() {
    const token = localStorage.getItem("token");
    let detail = details(token);
    this.props.dispatch(fetchProfile(detail.username));
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      email_notification_enabled: nextProps.profile.email_notification_enabled,
      app_notification_enabled: nextProps.profile.app_notification_enabled
    });
  }

  handleChangeEmailNotification  = event => {
    this.setState({ email_notification_enabled: event.target.checked });
  };
  handleChangeAppNotification  = event => {
    this.setState({ app_notification_enabled: event.target.checked });
  };



  handleSubmit = event => {
    event.preventDefault();
    const new_profile = {
      email_notification_enabled: this.state.email_notification_enabled,
      app_notification_enabled: this.state.app_notification_enabled
    };
    let data = { profile: new_profile };
    this.props.dispatch(updateProfileAction(this.state.username, data));
  };

  render() {
    const {

      app_notification_enabled,
      email_notification_enabled
    } = this.state;

    return (
      <div>
        <br />
        <div className="containers">
          <div className="upload-profile-form edit-upload-course-form">
            <img id="member-img" src={image} />
            <br />

            <Grid container spacing={3}>

              <Grid item xs={12}>
                <FormControlLabel
                  control={
                    <Switch
                      checked={app_notification_enabled}
                      onChange={this.handleChangeAppNotification}
                      value={app_notification_enabled}
                      inputProps={{ "aria-label": "secondary checkbox" }}
                    />
                  }
                  label="App notifications"
                />
              </Grid>
              <Grid item xs={12}>
                <FormControlLabel
                  control={
                    <Switch
                      checked={email_notification_enabled}
                      onChange={this.handleChangeEmailNotification}                      
                      value={email_notification_enabled}
                      color="primary"
                      inputProps={{ "aria-label": "primary checkbox" }}
                    />
                  }
                  label="Email notifications"
                />
              </Grid>

              <Grid item xs={12}>
                <button
                  onClick={this.handleSubmit}
                  className="submit-profile-button"
                >
                  {" "}
                  SAVE
                </button>
              </Grid>
            </Grid>
          </div>
        </div>
      </div>
    );
  }
}

标签： reactjsmaterial-ui