Форма Redux - добавление динамического имени в FormSection - PullRequest
Новая
       4

Форма Redux - добавление динамического имени в FormSection

0 голосов
/ 30 января 2019

Мне интересно, как я могу динамически добавить имя в раздел формы вместо статического имени, как в этом примере .Я пробовал что-то вроде этого: 

class Address extends FormSection {

    render() {
        return <div>
            <Field name="streetName" component="input" type="text"/>
            <Field name="number" component="input" type="text"/>
            <Field name="zipCode" component="input" type="text"/> 
        </div>
    }
}

Address.PropTypes = {
  name: PropTypes.string.isRequired,
};

Я вызываю этот компонент из моего родительского компонента, который подключен к избыточной форме, как это: 

  <Address
    name={formSectionName}
  />

Но, ничего не отображается,Я полагаю, чтобы переключить это с переключателем, но компонент никогда не отображается.Как я могу это сделать и динамически установить имя FormSection?

1 Ответ

0 голосов
/ 01 февраля 2019

Наследование классов в Javascript немного сложно, но я не хочу вдаваться в подробности.

Но я вижу, что перечисленный пример наследования содержит предостережение о том, что его не следует делатьможно изменить имя: https://redux -form.com / 7.4.2 / docs / api / formsection.md / # пример-использования

"Для таких компонентов, какАдрес, который редко меняет имя раздела формы, может быть полезным, чтобы компонент наследовал от FormSection вместо Component и установил опору имени по умолчанию, как показано ниже "

Из того, что я вижу, это происходит черезнаследование, вы больше не можете использовать внешнюю опору для управления ею, а вместо этого использовать статическую опору по умолчанию ...

Мое личное мнение по этому примеру состоит в том, что я нахожу это немного запутанным, если честно.Существует также открытый вопрос о github для этой конкретной проблемы: https://github.com/erikras/redux-form/issues/4359

Но почему бы вам не пойти на такой подход?Я бы решил это по составу. 

class Address extends React.Component {

    render() {

        const { name } = this.props;

        return (
           <FormSection name={name}>
            <div>
              <Field name="streetName" component="input" type="text"/>
              <Field name="number" component="input" type="text"/>
              <Field name="zipCode" component="input" type="text"/> 
            </div>
          </FormSection>
         )
    }
} 
Address.propTypes = {
  name: PropTypes.string.isRequired,
};
...