Автоматическое «для» и «ID» - PullRequest
Новая
       21

Автоматическое «для» и «ID»

0 голосов
/ 23 марта 2019

Поскольку мы не можем предполагать, что наши компоненты являются одиночными: я пытаюсь автоматически обработать присвоение htmlFor метке и полю. Ниже мы видим, что я использую useMemo и lodash uniqueId, чтобы запоминать уникальный идентификатор для формы при первом рендеринге. Мне пришлось дать useMemo и пустой массив в качестве второго аргумента, чтобы он никогда не пересчитывал идентификатор. Есть ли какой-нибудь автоматизированный способ справиться с этим в final-form? 

import React, { useMemo } from 'react';
import { Form, Field } from 'react-final-form';
import { uniqueId } from 'lodash';

function TaskForm() {

    const id = useMemo(() => uniqueId('_form'), []);
    const getFor = name => name + id;

    return (
        <>
            <h3>Create a task</h3>
            <Form onSubmit={onSubmit}>
                {({ handleSubmit, pristine, invalid, ...rest }) => {(
                    <form onSubmit={handleSubmit}>
                        <div className="form-group">
                            <label htmlFor={getFor('firstName')}>First Name</label>
                            <Field name="firstName" id={getFor('firstName')} component="input" placeholder="First Name" />
                        </div>

                        <button type="submit" disabled={pristine || invalid}>Submit</button>
                    </form>
                )}}
            </Form>
        </>
    );
}
...