如何将"final-form-calculate"与"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"结合在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！