取消按钮处理先前的状态答案

【问题标题】：Cancel Button handle previous state取消按钮处理先前的状态
【发布时间】：2020-04-25 21:01:32
【问题描述】：

我有一个保存按钮，用于保存复选框和数字字段，然后调用以更新这些数字。我正在添加一个“取消”按钮，我希望能够使用该按钮将状态恢复到以前的状态（保存之前）。在 React 中执行此操作的最佳方法是什么？这是我的代码

class Alerts extends Component {
  state = {
    prevId: null,
    checked:  this.props.preferences.last_order_alert_enabled,
    days:     this.props.preferences.last_order_alert
  };

  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 = () => {
    console.log('mountDays',this.props.preferences.last_order_alert);
  console.log('mountCheck',this.props.preferences.last_order_alert_enabled);
  this.setState({ days: this.props.preferences.last_order_alert });
  this.setState( {checked: this.props.preferences.last_order_alert_enabled})
};

  toggleAlerts = e => {
    console.log('lastOrderEnable', this.props.preferences.last_order_alert_enabled);
    console.log('lastOrderDaysAlert', this.props.preferences.last_order_alert);
    this.props.actions.updateLastOrderAlert(
      this.props.preferences.id,
      this.props.dealerID,
      this.props.isGroup,
      this.props.preferences.last_order_alert = this.state.checked,
      this.props.preferences.last_order_alert_enabled = this.state.days
    );
  };

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

  render = () => {
    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.bind(this)}
            />
          </div>
        </div>
        <div className="preferenceRow">
          <div className="preferenceLabelWrapper">
            <div className="preferenceLabel">Days Since Last Order</div>
          </div>
          <div className="preferenceInput">
            <input
              type="number"
              value={this.state.days}
              // onBlur={this.handleAlertDays}
              onChange={this.handleChange.bind(this)}
              style={{ width: "50px" }}
            />
          </div>
        </div>
          <div className="preferenceRow" style={{ display: "flex" }}>
            <button
                className={'btn btn-default'}
                type="submit"
                onClick={this.componentDidMount}
            >Cancel
            </button>

            <button
                style={{ marginLeft: "auto" }}
                className={'btn btn-primary'}
                type="submit"
                onClick={this.toggleAlerts}
            >Save
            </button>
          </div>
      </div>
    );
  };
}

当我点击取消按钮（点击保存之前）时，现在正在保存更改并重新渲染它们。但是，在点击保存并转到另一个页面然后返回后，它不会以 componentDidMount 中的初始状态呈现。

【问题讨论】：

不要使用 componentDidMount onClick。创建一个新函数，并在 componentDidMount 和 onClick 中使用该函数。
@Peter 你能详细说明一下吗？
关于你的问题：设置一些初始状态，你可以恢复当前状态。它可以存储在状态中，也可以存储在简单的常量中
componentDidMount 是一个组件生命周期事件。在其他事件中使用它不是最佳实践。尝试创建一些函数，如 initFunction = ()=> { console.log('mountDays',this.props.preferences.last_order_alert); console.log('mountCheck',this.props.preferences.last_order_alert_enabled); this.setState({ days: this.props.preferences.last_order_alert }); this.setState( {checked: this.props.preferences.last_order_alert_enabled}) } 并在 componentDidMount 调度该函数，例如： componentDidMount(){this.initFunction()} 以及 onClick={this.initFunction}
@Peter 哦，我明白了。刷新时加载保存状态的最佳做法是什么？看起来现在它确实控制台记录了正确的“componentDidMount”周期，但检查标记或数字设置不正确。

标签： javascript reactjs ecmascript-6 redux

【解决方案1】：

切勿在 onClick 中使用生命周期方法
如果我理解正确，您应该使用 componentDidUpdate(prevProps, prevState) 生命周期方法来获取以前的道具和更改后的以前的状态。每次重绘后，react 都会在该方法中为您提供先前的道具和先前的状态。

对不起，如果这不是你需要的

【讨论】：