Question

我有一个嵌入组件的容器。在组件中，除了容器作为props发送的状态外，我具有这样创建的状态。在组件中，我有类似的东西在容器中，我有这样的东西

class UserTestContainer extends React.Component {

........
return (
      <Container {...userSettings}>
        <UserTest {...this.props}  />
      </Container>
    )

class UserTest extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      showFlag: false
    }
}

此组件将呈现用户列表。在同一UserTest组件中，我将打开模式对话框当单击特定行上的编辑图标时。单击此编辑时，我将showFlag设置为true，并基于此showFlag true条件打开模式。单击模式对话框中的update或close按钮后，我将路由到相同的路径/用户，将再次路由到UserTestContainer，该路径将移动到UserTest组件。这次应关闭模态。但是我看到showFlag仍然为true，它是在编辑单击期间设置的。在这种情况下，您可以建议如何将showFlag状态值设置为默认值，即false以便可以关闭模式对话框。

Answer 1

2种方式

在您的关闭模式处理程序中，您可以将showflag状态设置为false。
您可以使用用户配置文件组件的组件卸载回调方法将showflag状态设置为false。

Answer 2

目前，我使用的方法如下。

    import React, { Component } from 'react';

    class Person extends Component {
        state = {
            firstName: null,
            lastName : null,
            age      : null,
            address  : null,
        }

        // Set state to default state
        setDefaultState = () => {
            this.setState({
                firstName: null,
                lastName : null,
                age      : null,
                address  : null,
            });
        }

        render() {
            return(
                <div>
                    Person Component
                </div>
            );
        }
    }

    export default Person;

但是我不确定还有其他简单的方法可以做到这一点。如果React JS中存在任何预定义的函数，我认为它比这种方法要好。

将js组件状态设置为默认值

2 个答案: