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

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

我试过这个：

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

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

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

我在类似

this.resetToInitialState（）的函数中调用这个resetToInitialState

this.setState（{name:e.target.value}）
margin=“正常”
variant=“概述”
/>
你忘了
{}

this.setState({...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
组件，以同时重置所有
TextField
组件

import React, { Component } from 'react';

class MyGroupedTextFields implemements Component {

  constructor(props) {
    super(props);
    this.state = {
       fields: {},
       spinner: false,
       open: false,
       errorMessage: ''
    };
  }

  resetTextFields = () => {
    const state = { ...this.state };
    state.fields = {};
    this.setState({ state });
  }

  onTextFieldChange = event => {
    const fields = {...this.state.fields};
    fields[event.target.name] = event.target.value;
    this.setState({ fields });
  }

  submit = async () => {
    // perform submit network request
    // pseudo code
    const response = await submitForm(this.state.fields);
  }

  render() {
    return (
      <div>
        <TextField
          name='textField1'
          onChange={this.onTextFieldChange}
          value={this.state.fields.textField1}
        />
        <TextField
          name='textField2'
          onChange={this.onTextFieldChange}
          value={this.state.fields.textField2}
        />
        <TextField
          name='textField3'
          onChange={this.onTextFieldChange}
          value={this.state.fields.textField3}
        />
        <button onClick={this.resetTextFields}>
          Reset
        </button>
        <button onClick={this.submit}>
          Submit
        </button
      </div>
    );
  }
}

import React，{Component}来自'React'；
类MyGroupedTextFields实现组件{
建造师（道具）{
超级（道具）；
此.state={
字段：{}，
纺纱工：错，
开：错，
错误消息：“”
};
}
resetTextFields=（）=>{
const state={…this.state}；
state.fields={}；
this.setState（{state}）；
}
onTextFieldChange=event=>{
常量字段={…this.state.fields}；
字段[event.target.name]=event.target.value；
this.setState（{fields}）；
}
提交=异步（）=>{
//执行提交网络请求
//伪码
const response=wait submitForm（this.state.fields）；
}
render（）{
返回(
重置
提交
出什么问题了？
this.resetToInitialState（）
未重置为初始状态？是否有任何错误？@Vencovsky no errors cab请在代码中检查此项，以将某些状态值初始化为初始状态。什么对您不起作用？因此，您没有收到任何错误，但发生了什么事？您希望看到什么，看到什么？请按@Vencovsky请求添加完整代码。@devserkan我现在添加了一些代码…问题是框中的填充值仍然存在…我想要的是删除textbox@Omkar666你能把完整的组件添加到你的问题中吗？它可以工作，但我不能更改文本字段中的填充值，但在选择中它可以为我工作。我已经添加了一些cod上面的e请看一看我在stackblitz和@Gaspar中尝试过，但填充的框不会被重置，就像我想做类似于此
文档的事情一样。getElementById（'idValue'））.value=null
@Omkar666请添加您当前正在使用的完整代码，因为它变得非常混乱，而且我们对您的组件的工作方式知之甚少。好吧，让我这样说，我的组件中有20个文本字段，所以您说我为所有这20个字段创建了一个名为onChangeReset的方法，但我猜已经用完了名称，因为所有方法名称必须不同，对吗？虽然实现错误，但请发布通用答案，该答案可能适用于各种情况。您需要20个文本字段组件，每个组件中存储不同的名称变量，并且您希望能够一次清除所有组件？正确吗？我可以使用通用
onC更新答案HangReset
用于所有两个文本字段。何时全部重置？是的，我有一些值处于状态，如message、error（错误），我不想重置，其余我想重置，我可以重置（因为我正在检查这些框中的空值，当我再次获取值时，它会显示空值，但值仍然填充在框中）.我想要的很简单，当我按下一个按钮时，我想让这些文本字段中的所有文本都像that@Omkar666我编辑了我的答案，希望能为您提供解决方案。Kay，如果字段中的数据为json数组，则onTextFieldChange函数中的代码将起作用……您是否正确设置了值？
fields[event.target.name]=event.target.value；
您确定这是一个通用答案吗？
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}
/>

import React, { Component } from 'react';

class MyGroupedTextFields implemements Component {

  constructor(props) {
    super(props);
    this.state = {
       fields: {},
       spinner: false,
       open: false,
       errorMessage: ''
    };
  }

  resetTextFields = () => {
    const state = { ...this.state };
    state.fields = {};
    this.setState({ state });
  }

  onTextFieldChange = event => {
    const fields = {...this.state.fields};
    fields[event.target.name] = event.target.value;
    this.setState({ fields });
  }

  submit = async () => {
    // perform submit network request
    // pseudo code
    const response = await submitForm(this.state.fields);
  }

  render() {
    return (
      <div>
        <TextField
          name='textField1'
          onChange={this.onTextFieldChange}
          value={this.state.fields.textField1}
        />
        <TextField
          name='textField2'
          onChange={this.onTextFieldChange}
          value={this.state.fields.textField2}
        />
        <TextField
          name='textField3'
          onChange={this.onTextFieldChange}
          value={this.state.fields.textField3}
        />
        <button onClick={this.resetTextFields}>
          Reset
        </button>
        <button onClick={this.submit}>
          Submit
        </button
      </div>
    );
  }
}