如何将"final-form-calculate"与"final-form-array"结合在一起 [英] How do I combine `final-form-calculate` with `final-form-array`
问题描述
我有一个使用 react-final-form-array
的表单有很多与会者".我希望每个Attendee.Email输入都进行Web查找,然后根据结果设置Attendee.FirstName和Attendee.Surname.
I have a form which uses react-final-form-array
in order to have many "Attendees". I'm wanting each of the Attendee.Email inputs to do a web lookup and then set the Attendee.FirstName and Attendee.Surname based off the result.
我不确定应如何使用 final-form-calculate
一个>装饰.具体来说,我不知道如何引用数组中的单个表单项.
I'm not sure how this should be expressed with a final-form-calculate
decorator. Specifically, I don't know how to reference the individual form item within the array.
这是我的开始:
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;
推荐答案
Took me a bit of hunting but it's actually pretty simple - from the website i noticed they have it listed (but not clearly)
因此,对于我来说,我只是选择了名称并更改了文本的最后一部分,以反映我想要修改的对象属性.
So for my case, i just picked up the name and changed the last part of the text to reflect the object property i wanted to modify.
下面,我使用正则表达式来匹配一个字段,然后替换名称值的最后一部分以匹配另一个字段(存储在fieldName中),然后返回一个包含我要更改的新字段和新值的数组./p>
Below, i use regex to match a field, then replace the last part of the name value to match a different field (stored in fieldName) and then return an array containing the new field i am changing and the new value.
{
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()
};
}
}
这篇关于如何将"final-form-calculate"与"final-form-array"结合在一起的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!