javascript - 重置状态导致 React mixin 出现问题

Question

在我的 React 组件中，我使用 MediaMixin应用基于媒体查询的类。这是一个简化的示例:

R.createClass({
  mixins: [MediaMixin],

  render: function () {
    var mediaquery = this.state.media;

    return (
      <Component responsive={mediaquery.small}>
        <input value={this.state.formInput1} >
        <input value={this.state.formInput2} >
        <input value={this.state.formInput3} >
      </Compontent>
    )
  }
});

在上面，{mediaquery.small}返回true或false取决于视口(viewport)大小。

该组件还有一个初始状态，用于为组件中的表单设置一些值。

getInitialState: function () {
  return {
    formInput1: '',
    formInput2: '',
    formInput3: null
  };
},

当表单提交/保存，或者表单被取消时，为了重置我们使用的表单:

_cancel: function () {
  this.setState(this.getInitialState());
}

但这会导致 mixin 出现问题，因为它删除了 state包含 mixin 的 mediaquery 的属性。

我现在使用的解决方案涉及重置 state手动与表单相关的属性，例如:

_cancel: function () {
  this.setState({
    allowanceType: '',
    allowanceAmount: '',
    allowanceDocument: null
  });
}

问题 - 如何重置 state并保留 mixin state属性(无需手动重置每个表单 state 属性)？

Answer 1

你可以使用这个。

_cancel: function () {
    var newState = this.getInitialState();
    newState.media = this.state.media;
    this.setState(newState);
}

请记住，您应该将当前状态视为不可变(仅供引用)。