Question

我有以下redux-form（6.5.0）源代码：

＆＃13;

class MyForm extends Component {

	handleSubmit() {
 		console.log("Inside the handleSubmit of the MyForm Component where state is accessible", this.state.MyStateElement);
	}

	function render() {
		return (
  		<<<<	CHOICE 1: >>>> 
      <form onSubmit={handleSubmit(this.handleSubmit.bind(this))} >

  		<<<<	CHOICE 2: >>>> 
      <form onSubmit={handleSubmit(submit)}>

				{someFields}
			</form>
		);
	}
}

function submit(values) {
	console.log("submit function outside the MyForm Component where form values are accessible but the State is NOT accessible", values);
	// values correspond to every checkbox, radio button inside MyForm
}

＆＃13;

有一个MyForm组件。它里面有一个redux-form。现在有一个handleAubmit（）函数，它在react组件中定义。在react组件外部定义了一个submit（）函数。现在我可以为表单标签启用CHOICE 1或CHOICE 2定义。如果我启用第一个，则调用react组件内的handleSubmit。在这里，我可以访问this.state但无法访问表单中的各个字段（除非我可以手动将每个字段映射到全局状态，这对于几十个字段我无法明确地执行我有）。如果我启用了CHOICE 2，则所有字段的值都正确地进入submit功能。但我无法访问this.state函数中的submit。

我的问题是：有没有办法在handleSubmit / submit函数中获取Field值以及this.state？

Answer 1

好的，我找到了一个解决方案（不确定这是否是最好的）。我只需要将values参数添加到handleSubmit函数中。因此更新的来源将是：

class MyForm extends Component {

	handleSubmit(values) {
 		console.log("State:", this.state.MyStateElement);
 		console.log("Form values:", values);
	}

	function render() {
		return (
			<form onSubmit={handleSubmit(this.handleSubmit.bind(this))} >
				{someFields}
			</form>
		);
	}
}

Answer 2

另一个解决方案是......

1）当您使用reduxForm包装表单组件时，指定了onSubmit选项。

＆＃13;

class myForm extends React.Component {}

export default reduxForm({
    form: 'myForm',
    onSubmit: function(values) { console.log('hello', values) }
})(myForm);

＆＃13;

2）此功能在组件内部this.props.handleSubmit可用，因此您仍然可以编写自己的提交处理程序并在其中调用this.props.handleSubmit。

＆＃13;

class myForm extends React.Component {
  myOwnSubmitHanlder() {
    console.log('hello', this.state);
    this.props.handleSubmit()
  }
  
  render() {
    return (
      <form onSubmit={this.myOwnSubmitHanlder}></form>
    )
  }
}

＆＃13;

redux-form：访问handleSubmit上的state和form-values

2 个答案: