我有一个带有输入的组件。
输入具有一个初始值originalValue
,该初始值是从props
设置的。输入值也可以根据更改进行更新。但是还有一个重置按钮,它应该像这样工作:
用户更改输入的值。之后,他们可以单击“重置”按钮,输入的值应更改为prevoius值。不是props
中的原始版本。例如,用户放置权为'apples'
,然后将该值更新为'apples and oranges'
,然后单击“重置”按钮,该值将更改回'apples'
所以我认为我需要有一个价值,就是将输入的价值退一步的状态。我希望这是有道理的。
export default class MyComponent extends React.Component {
this.state = { originalValue: this.props.value; value: '' }
onChange(e) {
this.setState({
value: e.target.value
})
}
resetValue() {...}
render(){
return (
<input type="text" onChange={this.onChange} className="form-control" value={this.state.value} name="title" />
<button onClick={this.resetValue}> Reset </button>
);
}
};
答案 0 :(得分:0)
您可以具有另一个状态,该状态保存以前的状态:),并且仅在更新状态时进行更新。
this.state = { originalValue: this.props.value; value: ''; previousValue: this.props.value }
onChange(e) {
// will save the previous state and update the value with the newState
let previousValue= this.state.value
this.setState({
value: e.target.value,
previousValue: previousValue
})
}
resetValue() {
this.setState({
value: this.state.previousValue,
})
}