Несколько флажков в редукционной форме

Я хотел бы спросить, вот сценарий. У меня есть этот несколько флажков, но моя проблема заключается в том, что всякий раз, когда я устанавливаю один флажок, выбираются все 4 флажка. А также почему значение флажка просто истинно или ложно. Вот мой флажок:

<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value="Seed" /> Seed</label>
</div>
<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value="Early Stages" /> Early Stages</label>
</div>
<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value="Formative Stages" /> Formative Stages</label>
</div>
<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value=" Later Stages" /> Later Stages</label>
</div>

reactjs redux-form
person Sydney Loteria    schedule 16.03.2017    source источник
comment
ReduxForm не поддерживает группу флажков. Это может помочь вам в качестве обходного пути.   -  person Jyothi Babu Araja    schedule 16.03.2017
comment
Привет @JyothiBabuAraja, у тебя есть пример, как это реализовать. Я совсем в новой реакции :D. Благодарю вас!   -  person Sydney Loteria    schedule 17.03.2017
comment
Проверьте это и пример   -  person Jyothi Babu Araja    schedule 17.03.2017
comment
Да, я пробовал это, но есть ошибка, похоже, что она использует v5.5.3 redux-form, а я использую v6.5.0.   -  person Sydney Loteria    schedule 17.03.2017
comment
Я также нахожусь в пути решения этой проблемы :-), но пока не нашел конкретного ответа.   -  person Aftab Naveed    schedule 18.03.2017
comment
@AftabNaveed Я решил проблему, используя это. проверьте эту ссылку github.com/erikras/redux-form/issues/   -  person Sydney Loteria    schedule 18.03.2017
comment
Посмотрите этот ответ stackoverflow.com/a/65883867/340142, он должен быть выбран.   -  person Marecky    schedule 07.05.2021

Ответы (3)


arrow_upward
18
arrow_downward

Для таких людей, как я, которые плохо знакомы с редукцией и реакцией, может найти исходный код, упомянутый здесь путаница. Я изменил и преобразовал его в класс ES6. Я также удалил начальную загрузку, проверку и упростил отладку.

Вот модифицированный код

import React from 'react';

class CheckboxGroup extends React.Component {

    checkboxGroup() {
        let {label, required, options, input, meta} = this.props;

        return options.map((option, index) => {
            return (
            <div className="checkbox" key={index}>
                <label>
                    <input type="checkbox"
                           name={`${input.name}[${index}]`}
                           value={option.name}
                           checked={input.value.indexOf(option.name) !== -1}
                           onChange={(event) => {
                               const newValue = [...input.value];
                               if (event.target.checked) {
                                   newValue.push(option.name);
                               } else {
                                   newValue.splice(newValue.indexOf(option.name), 1);
                               }

                               return input.onChange(newValue);
                           }}/>
                    {option.name}
                </label>
            </div>)
        });
    }

    render() {
        return (
            <div>
                {this.checkboxGroup()}
            </div>
        )
    }
}


export default CheckboxGroup;

Использование:

let optionsList = [{id: 1, name: 'Optoin1'}, {id: 2, name: 'Option 2'}, {id: 3, name: 'Option 3'}]     
<Field name="roles" component={CheckboxGroup} options={optionsList} />
person Aftab Naveed    schedule 18.03.2017
comment
Большое спасибо @aftab-naveed! Как выглядит объект optionsList? Пытаюсь реализовать безуспешно. - person Gaius; 20.03.2017
comment
let optionList = {id: 1, имя: 'Optoin1', id: 2, имя: 'Option 2'} - person Aftab Naveed; 21.03.2017
comment
Хорошо, но событие касания у меня не работает, оно всегда ложно. После отправки первой формы событие Touch начинает срабатывать. const {options, name, input, meta: { touched, error }} = this.props; const hasError = коснулся && error; - person TariqN; 19.07.2017
comment
Работает отлично; по какой-то причине мне пришлось внести изменение в newValue: const newValue = [...input.value] || [] - person bozdoz; 02.04.2019
comment
мне нужен jQuery для этого? - person Maddocks; 10.07.2019
comment
Нет, для этого вам не нужен jQuery :-) - person Aftab Naveed; 10.07.2019

arrow_upward
1
arrow_downward

Укажите разные названия полей для каждого флажка. (name=investor_stage). Проблема в том, что все имена полей одинаковы.

person Silambarasan N    schedule 25.01.2021

arrow_upward
0
arrow_downward

Добавив немного стиля в @Aftab Naveed, вместо этого я завернул свои флажки в метку с этими именами классов, и они стали очень красивыми и их было легче нажимать:

<label key={option.name} className="form-check-label" style={ {"fontSize": "1.5em"} }>
          <input ... />
            <span>{option.name}</span>
          </label>

я не использовал бутстрап, я думаю, что это редукционная форма с className "form-check-label"

person Maddocks    schedule 11.07.2019