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。

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

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

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

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

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

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

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

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

Answer 1

您可以将组件的初始状态存储在getInitialState的另一个函数中，因为它与mixin共享。

像：

getInitialState: function() {
  return this.componentInitialState();
},
componentInitialState: function() {
  return {
    allowanceType: '',
    allowanceAmount: '',
    allowanceDocument: null
  };
},
cancel: function() {
  this.setState(this.componentInitialState());
}

Answer 2

你可以使用它。

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

请记住，您应该将当前状态视为不可变（仅供参考）。

重置状态导致React mixin

2 个答案: