Question

我想将状态变量重置为仅针对特定值的初始值

我已经尝试过了：

  const initialState={
     name:'',
     location:'',
     ....
     ....
     ....
   }

   this.state={
     ...initialState,
     spinner:false,
     open:false,
     errorMessage:''
   }

   resetToInitialState = () =>{
   this.setState(...initialState);
   }

我正在像this.resetToInitialState();这样的函数中调用此resetToInitialState

<TextField
                      id="outlined-name"
                      label="Machine id"
                      className={classes.textField}
                      InputProps={{
                        classes: {
                          input: classes.text,
                        },
                      }}
                      value={ !name && null } //tried this not working
                      onChange={e => this.setState({name: e.target.value})}
                      margin="normal"
                      variant="outlined"
                    />

Answer 1

您忘记了{}

this.setState({...initialState})

Answer 2

当您尝试重置状态时，您需要克隆初始状态。如果您传递对initialState的引用，那么在更改状态时，该引用将发生变异。

this.setState({...initialState});

要创建受控组件，TextField的值必须为this.state.name。

<TextField
  id="outlined-name"
  label="Machine id"
  className={classes.textField}
  InputProps={{
    classes: {
      input: classes.text,
    },
  }}
  value={ this.state.name }
  onChange={e => this.setState({name: e.target.value})}
  margin="normal"
  variant="outlined"
/>

编辑：当值是“我的值”时，重置TextField组件

如果您只想在名称是特定值时重置状态，则需要创建其他onChange函数并将onChangeReset设置为{{1 }}组件。

onChange

编辑：添加多个具有重置功能的TextField组件，以同时重置所有onChangeReset = e => { if(e.target.value === 'My Value') { this.resetToInitialState(); else { this.setState({ name: e.target.value}); } } <TextField onChange={this.onChangeReset} value={this.state.name} />组件。

TextField

仅针对特定状态变量将状态重置为初始状态

2 个答案: