Question

在我的React项目中，我创建了一个实用程序函数来为我的不同redux-form提供字段：

export const renderField = function(fieldConfig, fieldName) {
  //fieldHelper is provided by redux-form
  const fieldHelper = this.props.fields[fieldName];
  return (
    <div>
      <label>{fieldConfig.label}</label>
      <fieldConfig.fieldType
        {...fieldHelper}
        {...fieldConfig.props}
      />
    </div>
  );
}

在其中一个表单中，我有一个json配置（FIELDS）传递给这个函数：

const FIELDS = {
  name: {
    validate: validateName,
    fieldType: 'input',
    props: {
      className: 'name-field',
      type: 'text'
    }
  },
  description: {
    validate: validateDescription,
    fieldType: 'textarea',
    props: {
      className: 'desc-field',
      rows: 2,
      value: 'Add Description To Your Group',
      onBlur: this._hello // <--- ????????
    }
  }
}

class ShowGroup extends Component {
  _hello = () => {
    console.log(this); // this returns null or undefined
  };
  render() {
    return (
      <div className="show-group">
        <form>
          {_.map(FIELDS, renderField.bind(this))}
        </form>
      </div>
    );
  }
}

export default reduxForm({
  validate,
  //a unique id for this form
  form:'ShowGroup',
  fields: _.keys(FIELDS),
  fields_def: FIELDS
})(
  connect(null, {})(ShowGroup)
);

我想将ShowGroup组件绑定到onBlur回调函数。我该怎么做？

我已将FIELDS移至构造函数，但仍然无法在this函数中获得_hello。

我知道FIELDS是在类之外定义的，这是我的问题的主要观点：我想知道如何将类的上下文附加到该函数。如果绝对不可能，我怎么能这样做呢？

Answer 1

你不能bind()和箭头功能。

影响箭头功能引入的两个因素：更短功能和非约束力。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

使用function声明，而不是hello = function() {...}

Answer 2

您不能拥有绑定和箭头功能：

将您的_hello更改为：

_hello(){
    console.log(this); // this returns null or undefined
  };

将您的FIELDS移到课堂内，并在分配到onBlur时。做一个绑定，

onBlur: this._hello.bind(this)

将“this”绑定到对象中定义的函数

2 个答案: