Question

我正在尝试使用我的componentsnet props使用redux-form 6.1.1在submit事件处理程序中调用一个动作，但在事件处理函数中我得到class ForgetPasswordForm extends Component { xubmit (values) { console.log(this); } render() { const { handleSubmit } = this.props; return ( <form onSubmit={ handleSubmit(this.xubmit) }> ... ); }; }。这是我的工作：

() => handleSubmit(this.xubmit.bind(this))

我还尝试了React: this is null in event handler中提到的this.xubmit.bind(this)和{{1}}，但都没有成功。

以下是有关我的设置的详细信息：

样板：create-react-app v.0.5
react：v.15.3.2
redux：v.3.6

Answer 1

handleSubmit.bind(this.xubmit)通过这种方式在handleSubmit内，this指向this.xubmit。

我还建议您read how bind works.

注意：我只知道JavaScript

Answer 2

由于你没有提供handleClick函数，我只能想象你直接调用了传递的函数，如handleClick (fn) { fn() }，这样你就可以访问{{1}中的上下文}}。您还应该将函数传递给事件处理程序。做这样的事情，看看它是否有效：

fn

您需要将父组件的上下文发送到onSubmit={this.props.handleSubmit.bind(this.props.context, this.xubmit.bind(this))}并将ForgetPasswordForm绑定到它以访问该父组件的上下文并将handleSubmit绑定到this.xubmit以便它不是this。

Answer 3

你的自定义提交功能基本上是错误的，只需这样编辑你的代码。

class ForgetPasswordForm extends Component {
 xubmit = (values) => {
  console.log(this);
 }

}

以这种方式打电话，

<form onSubmit={handleSubmit((values) => this.xubmit(values)) }>

Answer 4

您必须同时使用class properties和箭头功能

类属性是stage-2

的一部分

class ForgetPasswordForm extends Component {
  xubmit = (values) => {
    console.log(this);
  }

  render() {
    const { handleSubmit } = this.props;
    return <form onSubmit={ handleSubmit(this.xubmit) }>;
  };
}

箭头功能将this绑定到函数

使用redux-form 6在onSubmit事件处理程序中缺少此项

4 个答案: