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

Resetting state causing issues with React mixin

本文关键字：mixin 问题 React 状态      更新时间：2023-09-26

在我的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属性）？

你可以

使用它。

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

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

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

喜欢：

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