如何将"最终形式计算"与"最终形式数组"结合起来

Question

>我有一个使用react-final-form-array的表单，以便拥有许多"与会者"。我希望每个 Attendee.Email 输入都进行 Web 查找，然后根据结果设置 Attendee.FirstName 和 Attendee.Surname。

我不确定应该如何用final-form-calculate装饰器来表达这一点。具体来说，我不知道如何引用数组中的单个表单项。

这是我的开始：

const MyForm = props => {
const calculator = createDecorator(
{
field: 'Attendees.Email', // <-- this needs to happen for each Email
updates: {
// ... do some lookups and set FirstName and Surname based off database query
Attendees.FirstName: (email, allValues) =>
someLookup(email).FirstName
}
},
);
const submit = values => {
console.log(values);
};
return (<Form onSubmit={submit}
mutators={{
...arrayMutators,
}}
decorators={[calculator]}
render={({handleSubmit, pristine, invalid, mutators: {push, pop}}) => {
return (
<form onSubmit={handleSubmit}>
<fieldset>
<legend>Attendees</legend>
<div className="fieldset">
<p><Button bsStyle="primary" onClick={() => push('Attendees', undefined)}>
Add attendee
</Button></p>
<FieldArray name="Attendees">
{({fields}) =>
fields.map((name, index) => (
<div key={name}>
<label>Attendee #{index + 1} {index > 0 && <span
onClick={() => {
const attendee = fields.remove(index);
}}
style={{cursor: 'pointer'}}
role="img"
aria-label="delete">❌</span>}</label>
<Field
name={`${name}.Email`}
component={TextField}
label="Email address"
validate={required}
/>
<Field
name={`${name}.FirstName`}
component={TextField}
label="First name"
validate={required}
/>
<Field
name={`${name}.Surname`}
component={TextField}
label="Surname"
validate={required}
/>
</div>
))}
</FieldArray>
</div>
</fieldset>
<Button type="submit" bsStyle="primary"
disabled={invalid}>Next</Button>
</form>
);
}}
/>);
};
export default MyForm;

Answer 1

花了我一点时间，但实际上很简单 - 从网站上我注意到他们列出了它(但不清楚)

因此，对于我的情况，我只是拿起名称并更改了文本的最后一部分以反映我想要修改的对象属性。

下面，我使用正则表达式来匹配字段，然后替换名称值的最后一部分以匹配不同的字段(存储在 fieldName 中)，然后返回一个包含我正在更改的新字段和新值的数组。

{
field: /fields[d+].field.text/, // when a field matching this pattern changes...
updates: (value, name, allValues) => {
console.log('Update called', value, name);
const fieldName = name.replace('.text', '.name');
return {
[fieldName]: value.replace(/W+/gi, '-').toLowerCase()
};
}
}