Редукс-формы, есть ли хороший способ сделать список флажков с переключением всех функций?

Question

Я использую последнюю версию redux-form v6.5.0. Мне интересно, какое наилучшее решение сделать для переключения всех компонентов, используя библиотеку.

В итоге я добавил различные поля в свою форму и сыграл регенерацию создателей форм действия и отреагировал жизненные циклы, но я не уверен, что это лучшее решение.

Есть ли у вас какие-либо примеры?

Что я сделал до сих пор испытывает в визуализации структуры, как это:

... 

<Field 
    name='toggleAll' 
    component={Ckbox} 
    onChange={this.toggleAllProfile} /> 
<div> 
{ 
    SUB_FIELDS.map((field, i) => (
     <Field key={i} name={field} component={Ckbox} /> 
    )) 
} 
</div> 

подполя представляет собой массив имен, что-то вроде этого:

const SUB_FIELDS = ['field1', field2, field3, ...]; 

тогда я componentWillReceiveProps, где я проверяю, проверяются ли подполя или нет переключатель toggleAll соответственно.

componentWillReceiveProps(nextProps) { 
    const { 
    profiles, 
    } = nextProps; 
    const allFieldsChecked = SUB_FIELDS.filter(
    el => nextProps[el] 
).length === SUB_FIELDS.length; 

    if (
    allFieldsChecked && 
    toggleAll 
) { 
    return; 
    } else if (
    allFieldsChecked && 
    !toggleAll 
) { 
    this.props.change('toggleAll', true); 
    } else if (
    !allFieldsChecked && 
    profiles 
) { 
    this.props.change('toggleAll', false); 
    } 
} 

и способ для переключения их всех на toggleAll OnChange

toggleAllProfile = (e) => { 
    SUB_FIELDS.forEach(field => { 
    this.props.change(field, e.target.checked); 
    }); 
}; 

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

Я пробовал использовать компонент Fields, но тогда это выглядело как слишком много визуализации.

Я думал сделать их в отдельном компоненте, но тогда мне нужно будет обернуть этот компонент в другой форме, так что у меня получится 2 redux-form s я ошибаюсь?

Answer 1

Я думал, чтобы сделать их в виде отдельного компонента, но тогда мне нужно будет обернуть этот компонент в другой форме, так что я в конечном итоге, 2 Redux-формы я не прав?

К счастью, да, вы ошибаетесь! Вам нужно только украсить компонент верхнего уровня с помощью reduxForm(). Этот компонент может отображать дочерние компоненты, которые также могут использовать <Field /> или другие компоненты redux-form. Вы могут хотите украсить эти дочерние компоненты с помощью других селекторов от redux-form, чтобы ввести соответствующее состояние формы, но вам не нужно украшать его reduxForm().

Я пробовал использовать компонент Fields, но тогда это выглядело как слишком много .

Он должен только повторно визуализироваться, когда он установлен или не установлен, или когда одно из ваших подполей проверено/снято. Если это отдельный компонент, который просто отображает один флажок, это не должно быть большой проблемой производительности. Если вы видите больше повторений, чем это, стоит исследовать причину. Поиск причины может научить вас важным урокам по предотвращению проблем с производительностью в будущем.

То, что у вас сейчас работает, хорошо и выглядит нормально. Возможно, рекомендуется использовать <Fields />.

Редактировать

Чтобы уточнить, если вы сделаете отдельный компонент, он должен просто отрендерить выключенность все флажки; вы должны отделить свои подполя от этого. Это предотвратит повторное рендеринг подполей 1-n, когда вы только проверили подполе 0.