[英]How do I combine `final-form-calculate` with `final-form-array`
I have a form which uses react-final-form-array
in order to have many "Attendees". 我有一个使用react-final-form-array
,以便拥有许多“与会者”。 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. 我希望每个Attendee.Email输入都进行Web查找,然后根据结果设置Attendee.FirstName和Attendee.Surname。
I'm not sure how this should be expressed with a final-form-calculate
decorator. 我不确定应该如何用final-form-calculate
装饰器表达这一点。 Specifically, I don't know how to reference the individual form item within the array. 具体来说,我不知道如何引用数组中的单个表单项。
Here's what I've got as a start: 这是我的开始:
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. 因此,对于我来说,我只是选择了名称并更改了文本的最后一部分以反映我想要修改的对象属性。
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. 在下面,我使用正则表达式来匹配一个字段,然后替换名称值的最后一部分来匹配另一个字段(存储在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()
};
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.