Question

我有一个页面，其中包含许多组件，例如TextField和combobox es。假设单击了一个按钮Clean，我想刷新当前页面以将每个组件设置为其默认值，并将state设置为initial state。当我尝试window.location.reload()时，它会刷新整个页面，并且用户需要再次登录。

我尝试了forceUpdate()，但它保留了页面的当前状态。

我还尝试过，按如下推历史，这可能是荒谬的，我是新手。

this.props.history.push("/");
this.props.history.push("new-record");

但这没用。页面保持不变。

我该如何处理？

Answer 1

尝试类似的方式进行状态重置：

const initialState = { name: 'React' }

class App extends Component {
  constructor() {
    super();
    this.state = initialState
  }

resetState=()=>{
this.setState(initialState)
}


  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <button
      onClick={this.resetState}>reset</button>
      </div>
    );
  }
}

Answer 2

这是一个带有代码的示例： Codepen

存在一个带有 defaultInputValue 和 currentValue 的本地状态：

  this.state = {
    defaultInputValue: defaultValue,
    currentValue: defaultValue
  }

setDefault 函数恢复默认值：

setDefault = () => {
   this.setState({currentValue: this.state.defaultInputValue});
}

如何在React js中重新渲染页面以获取其默认值

2 个答案: