ReactJS:如何在不使用redux-form的情况下将表单值作为JSON对象提交

Question

我正在使用redux-form将表单值作为JSON对象提交到POST服务。但是redux-form字段(<Field />)不支持像onChange、onBlur这样的事件。所以我想使用默认组件，如<select><option></select>、<input type="text" />，但如果我使用纯 html 组件，像 onChange 这样的事件将起作用。但是在这里，我无法在没有redux-form的情况下将表单值作为服务对象提交。请指导...

谢谢 沙什

Answer 1

redux-form 确实支持它，并将自定义组件传递给<Field />。

其中一种方法是这个(取自文档)

1. 一个组件

这可以是您编写或导入的任何组件类 来自第三方库。

MyCustomInput.js

import React, { Component } from 'react'
class MyCustomInput extends Component {
render() {
const { value, onChange } = this.props
return (
<div>
<span>The current value is {value}.</span>
<button type="button" onClick={() => onChange(value + 1)}>Inc</button>
<button type="button" onClick={() => onChange(value - 1)}>Dec</button>
</div>
)
}
}
Then, somewhere in your form...    
import MyCustomInput from './MyCustomInput'
<Field component={MyCustomInput}/>

让 redux-form 提交你的值会容易得多，因为你已经在使用它了。

现场文档