如何'重置'ReactJS元素?

fad*_*bee 25 javascript reactjs

我正在尝试"重置"一个ReactJS元素.

在这种情况下,元素是页面内容的90%以上.

我正在用replaceState它的初始状态替换元素的状态.

不幸的是,具有自己的"状态"的子元素不会重置.特别是,表单字段保留其内容.

有没有办法强制重新渲染元素,这也会导致子元素重新渲染,就好像页面刚刚加载一样?

fad*_*bee 51

添加key到元素会强制在该键更改时重新呈现元素(及其所有子元素).

(我将'key'的值设置为简单地发送初始数据的时间戳.)

render: function() {
  return (
    <div key={this.state.timestamp} className="Commissioning">
      ...
Run Code Online (Sandbox Code Playgroud)


Chr*_*hin 6

this.replaceState(this.getInitialState())如果你正在寻找的话,该方法实际上不会重置输入的子节点.对于任何想要重置其表单字段的人来说,有一个标准的DOM reset()函数可以清除给定元素中的所有输入.

所以使用React,它会是这样的:

this.refs.someForm.getDOMNode().reset();
Run Code Online (Sandbox Code Playgroud)

Doumentation:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset