javascript - 将 "this"绑定(bind)到对象中定义的函数

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 组件绑定(bind)到 onBlur 回调函数。我该怎么做？

我将 FIELDS 移到了构造函数中，但我仍然没有在 _hello 函数中得到所需的 this。

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

Answer 1

您不能使用 bind() 和箭头函数。

Two factors influenced the introduction of arrow functions: shorter functions and non-binding of this.

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

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