У меня есть кнопка сохранения, которая сохраняет флажок и поле номера, а затем выполняет вызов для обновления этих номеров. Я добавляю кнопку «Отмена», которую я хочу использовать, чтобы вернуть статус в предыдущее состояние (до сохранения). Каков наилучший способ сделать это в 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.