如何获得React中先前的输入值?

时间:2019-12-01 14:16:07

标签: reactjs

我有一个带有输入的组件。

输入具有一个初始值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>
        );
    }

};

1 个答案:

答案 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,
    })

   }