反应复选框以传递字符串值以更新查询

Question

这是我的代码：

import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";

import {
  setLastOrderDays,
  updateLastOrderAlert
} from "reducers/DealerPreferencesReducer";

class Alerts extends Component {
  state = {
    prevId: null,
    checked:  ""
  };

  static getDerivedStateFromProps(props, state) {
    // Store prevId in state so we can compare when props change.
    // Clear out previously-loaded data (so we don't render stale stuff).
    if (props.dealerID !== state.prevId) {
      //update action goes here...
      //props.actions.getUsers(props.dealerID);
      return {
        prevId: props.dealerID
      };
    }

    // No state update necessary
    return null;
  }

  componentDidMount = () => {
    this.setState({ days: this.props.preferences.last_order_alert });
    //this.setState({ checked: this.props.preferences.last_order_alert_enabled})
  };

  toggleAlerts = e => {
    //console.log('lastOrder', this.props.preferences.last_order_alert_enabled);
    this.props.actions.updateLastOrderAlert(
      this.props.preferences.id,
      this.props.dealerID,
      this.props.isGroup,
      this.props.preferences.last_order_alert,
      this.props.preferences.last_order_alert_enabled === this.handleCheck
    );
  };

  handleCheck = event => {
    console.log('called', this.setState);
    this.setState({checked: event.target.checked})
  };

  handleAlertDays = e => {
    e.persist();
    if (String(e.target.value) !== this.props.preferences.last_order_alert) {
      this.props.actions.updateLastOrderAlert(
        this.props.preferences.id,
        this.props.dealerID,
        this.props.isGroup,
        String(e.target.value),
        this.props.preferences.last_order_alert_enabled
      );
    }
  };

  render = () => {
    console.log('checked', this.state.checked);
    const { preferences } = this.props;
    return (
      <div className="preferenceContainer">
        <div className="preferenceRow lg">
          <div className="preferenceLabelWrapper">
            <div className="preferenceLabel">Enable Alert</div>
            <div className="preferenceSubLabel">
              Toggles the Last Order Alert Email
            </div>
          </div>
          <div className="preferenceInput">
            <input
              type="checkbox"
              checked={this.state.checked}
              onChange={this.handleCheck}
            />
          </div>
        </div>
        <div className="preferenceRow">
          <div className="preferenceLabelWrapper">
            <div className="preferenceLabel">Days Since Last Order</div>
          </div>
          <div className="preferenceInput">
            <input
              type="number"
              value={preferences.last_order_alert}
              onBlur={this.handleAlertDays}
              onChange={e =>
                this.props.actions.setLastOrderDays(e.target.value)
              }
              style={{ width: "50px" }}
            />
          </div>
        </div>
        <div className="preferenceRow">
          <button
              className={'btn btn-primary'}
              type="submit"
              onClick={this.toggleAlerts}
          >Save
          </button>
        </div>
      </div>
    );
  };
}

const mapStateToProps = state => ({
  dealerID: state.DealerTreeReducer.selectedShop.id,
  isGroup: state.DealerTreeReducer.selectedShop.folder,
  preferences: state.DealerPreferencesReducer,
  loading: state.DealerTreeReducer.loading
});

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(
    { updateLastOrderAlert, setLastOrderDays },
    dispatch
  )
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(Alerts));

我想要做的是，每次单击复选框时，我都希望得到一个 1 或 0，然后我将使用它传递给 toggleAlerts 以更新我的应用程序中用户的首选项。该复选框现在仅选中和取消选中。它唯一的变化是当我点击保存按钮时。我最终想要做的是能够在我点击保存按钮时保存更改。谁能指出我正确的方向？

Answer 1

修改您的 handleCheck 函数和 setState 值并在触发 toggleAlerts 时访问该状态变量。

handleCheck = event => {
  console.log('called', this.setState);
  this.setState({checked: Number(event.target.checked) }) //change here
};

toggleAlerts = e => {
  this.props.actions.updateLastOrderAlert(
    this.props.preferences.id,
    this.props.dealerID,
    this.props.isGroup,
    this.props.preferences.last_order_alert,
    this.props.preferences.last_order_alert_enabled === this.state.checked //change here
  );
};