在某些情况下，只需将的所有值设置为state即可null。

如果您的状态以这种方式更新，则您不知道其中可能包含什么，则可能要使用

this.setState(Object.assign(...Object.keys(this.state).map(k => ({[k]: null}))))

它将改变状态如下

{foo: 1, bar: 2, spam: "whatever"} > {foo: null, bar: null, spam: null}

并非在所有情况下都是解决方案，但对我来说效果很好。

只是这样做

let state = this.state;
let keys = Object.keys(state)
keys.map(key => {
  state[`${key}`] = ''
})
this.setState(state)

我将在上述答案中添加以下内容：重置功能还应分配状态，如下所示：

reset() {
  this.state = initialState;
  this.setState(initialState);
}

原因是，如果您的状态选择的属性不处于初始状态，则不会清除该键/值，因为setState只会更新现有键。分配不足以使组件重新呈现，因此还请包含setState调用-您甚至可以在分配后使用this.setState（{}）。

这是我的处理方式：

class MyComponent extends React.Component{
  constructor(props){
    super(props);
    this._initState = {
        a: 1,
        b: 2
      }
    this.state = this._initState;
  }

  _resetState(){
     this.setState(this._initState);
   }
}

更新： 其实这是错误的。对于将来的读者，请参阅@RaptoX答案。另外，您可以使用不可变库，以防止由引用分配引起的怪异状态修改。

在大多数情况下，您不需要深层副本，很少的初始状态是对象的对象，因此请使用将babel转换为对象的散布运算符。assign应该很好。

因此，在构造函数内部您将拥有：

    class MyComponent extends Component {
        constructor(props) {
            super(props)
            this.state = {
                key: value,
                key2: value
            }
            this.initialState = { ...this.state } 
        }
    }

从那里你可以使用

this.setState(this.initialState);

重置。但是，如果由于某种原因您的初始状态是更复杂的对象，请使用一些库。

首先，使用componentWillMount()组件生命周期中的函数时，您需要存储初始状态：

componentWillMount() {
    this.initialState = this.state
}

这会存储您的初始状态，并可在需要时通过调用来重置状态

this.setState(this.initialState)

const initialState = {
    a: '',
    b: '',
    c: ''
};

class ExampleComponent extends Component {
    state = { ...initialState } // use spread operator to avoid mutation
    handleReset = this.handleReset.bind(this);

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

请记住，为了能够重置状态，重要的是不要更改initialState。

state = {...initialState} // GOOD 
// => state points to a new obj in memory which has the values of initialState

state = initialState // BAD 
// => they point to the same obj in memory

最方便的方法是使用ES6 Spread Operator。但是您也可以改用Object.assign。他们都将实现相同的目标。

state = Object.assign({}, initialState); // GOOD
state = {...initialState}; // GOOD

问题

该接受的答案：

const initialState = {
    /* etc */
};

class MyComponent extends Component {
    constructor(props) {
        super(props)
        this.state = initialState;
    }
    reset() {
        this.setState(initialState);
    }
    /* etc */
}

不幸的是不正确。

initialState作为对的引用传递this.state，因此，每当您更改时，state您也会更改initialState（const在这里并不重要）。结果是您永远无法返回initialState。

解

您必须深度复制 initialState到state，然后它才能工作。自己编写一个深层复制功能，或使用类似这样的现有模块。

这是作为功能实现的解决方案：

Class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = this.getInitialState();
  }

  getInitialState = () => ({
    /* state props */
  })

  resetState = () => {
     this.setState(this.getInitialState());
  }
}

据我所知，React组件不会保留初始状态的副本，因此您只需要自己做即可。

const initialState = {
    /* etc */
};

class MyComponent extends Component {
    constructor(props) {
        super(props)
        this.state = initialState;
    }
    reset() {
        this.setState(initialState);
    }
    /* etc */
}

请注意，该行this.state = initialState;要求您永远不要改变状态，否则您将污染initialState并且无法进行重置。如果无法避免突变，则需要initialState在构造函数中创建的副本。（或按照initialState进行功能getInitialState()。）

最后，建议您使用setState()而不是replaceState()。