javascript - 在 React + ES6 中重置初始状态

Question

我在下面有一个类 ElementBuilder，当用户保存他们构建的 Element 时，我希望状态重置为下面的值。

我在这个类中有一些我没有提供的函数，但是它们改变了 title、size 和 color 的状态。

在 ES 5 中，我的类上有一个 getInitialState 函数，并且可以在一个函数中调用 this.getInitialState()。

这个元素在我的应用程序中存在于登录用户的生命周期中，我希望默认值始终相同，无论过去的使用情况如何。

如何在不编写设置默认值对象的函数的情况下实现这一点(或者这就是答案)？谢谢!

class ElementBuilder extends Component {
    constructor(props) {
        super(props);

        this.state = {
            title: 'Testing,
            size: 100,
            color: '#4d96ce',
        };
    }

    resetBuilder() {
        this.setState({ this.getInitialState() });
    }
}

Answer 1

你可以使用 getter 函数:

class ElementBuilder extends Component {
  constructor(props) {
    super(props);

    this.state = this.initialState;
  }

  get initialState() {
    return {
      title: 'Testing',
      size: 100,
      color: '#4d96ce',
    };
  }

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

或者只是一个变量:

constructor(props) {
  super(props);

  this.initialState = {
    title: 'Testing',
    size: 100,
    color: '#4d96ce',
  };
  this.state = this.initialState;
}