创建一个具有反应最终形式的复合场

Question

我想创建一个具有 react-final-form 的复合字段(例如Location本身包含 2 个内部输入latitude和longitude(，但我找不到任何类似的例子。

<Field name="myField">
{props => (
<div>
<TextField
name={props.input.name}
value={props.input.value}
onChange={props.input.onChange}
/>
</div>
)}
</Field>

这是一个具有单个输入的简单示例， 我的问题是我们有两个输入，我不知道如何处理onChange.

Answer 1

我不明白您的确切要求，但是您可以在两个文本字段上对onChange调用相同的方法

handleLocationChange(partNumber, event) {
if(partNumber === 1) {
// handle change to first part of location
} else {
// handle change to second part of location
}
}
render () {
return <Field name="myField">
{props => (
<div>
<TextField
name={props.input.name}
value={props.input.value}
onChange={this.handleLocationChange.bind(this, 'part1')}
/>
<TextField
name={props.input.name}
value={props.input.value}
onChange={this.handleLocationChange.bind(this, 'part2')}
/>
</div>
)}
</Field>
}

假设您的两个位置部分都是文本，您可能希望将TextField替换为input

Answer 2

是否有一些理由不可接受的？

<Field name="location.latitude" component="input"/>
<Field name="location.longitude" component="input"/>