В форме Redux, как я могу установить начальное значение проверенного свойства флажка?

В нашем приложении Redux Form 5.3 (не 6.x) я хочу отобразить <input type="checkbox" /> следующим образом:

// In some cases, fieldHelper.checked is initially undefined. Then, when the
// user clicks one of the checkboxes, fieldHelper.checked is
// explicitly set to true or false. This change from one of the component's
// props being undefined to having a value causes a React warning; see
// http://stackoverflow.com/a/38015169/473792 and
// https://facebook.github.io/react/docs/forms.html#controlled-components
// So to prevent that warning, we do a quick null check on
// fieldHelper.checked and replace it with false explicitly if it is
// undefined before rendering the checkbox.
const fieldHelper = this.props.field['checkbox'];
const checked = fieldHelper.checked || false;

const modifiedFieldHelper = Object.assign({}, fieldHelper);
delete modifiedFieldHelper.checked;

return (
  <input
    checked={checked}
    {...modifiedFieldHelper}
  />
);

}

Как отмечено в комментарии, в моей тестовой среде this.props.field['checkbox'].checked становится undefined сразу после монтирования файла <input>. В результате, когда мои тесты изменяют значение this.props.field['checkbox'].checked, я получаю следующее предупреждение:

Предупреждение: ApplicantForm изменяет флажок неконтролируемого ввода типа на управляемый. Входные элементы не должны переключаться с неуправляемого на управляемое (или наоборот). Выберите между использованием контролируемого или неконтролируемого элемента ввода на протяжении всего срока службы компонента.

... Если я явно не установил checked prop в <input> в false вместо undefined, как показано во фрагменте кода, который я разместил выше.

Вместо использования этой нулевой проверки я хотел бы установить начальное значение this.props.fields['checkbox'].checked до запуска моих тестов. Я знаю, что могу установить начальное значение полей в Redux Form. Есть ли способ установить начальное значение вспомогательного свойства, такого как свойство checked, которым также управляет Redux Form?


reactjs javascript redux redux-form
person Kevin    schedule 03.01.2017    source источник
comment
Вы пробовали использовать логическое значение?   -  person gustavohenke    schedule 04.01.2017
comment
Похоже, что в Redux-Form в настоящее время есть некоторые ошибки в работе с флажками, поэтому я, возможно, столкнулся с этим: github.com/erikras/redux-form/issues/334   -  person Kevin    schedule 06.01.2017

Ответы (3)


arrow_upward
3
arrow_downward

Вы можете создать простое условие в проверенном атрибуте, чтобы, когда значение не определено, вы просто возвращали false:

<input 
  type="checkbox" 
  checked={typeof this.props.fields['checkbox'].checked == 'undefined'?false:this.props.fields['checkbox'].checked} 
  onClick={() => {... your onClick code ...}} />
person Santiago Bendavid    schedule 04.01.2017

arrow_upward
2
arrow_downward

Флажки ничем не отличаются от ввода текста. Вы все еще можете просто деструктурировать объект поля в свой <input>. Посмотрите, как значение employed используется в примере простой формы.

<input type="checkbox" {...myField}/>

Redux Form обнаружит, что это флажок (на самом деле он определяет значения boolean) и использует реквизит checked.

person Erik R.    schedule 04.01.2017
comment
Я понимаю, как деструктурировать объект поля в <input>. Что я хочу сделать, так это установить начальное значение, которое содержит объект поля. - person Kevin; 04.01.2017
comment
Ах хорошо. Я не видел твоего последнего предложения. Нет, если ваш ввод контролируется Redux-Form, вам нужно будет инициализировать его значение через систему initialValues. - person Erik R.; 05.01.2017

arrow_upward
0
arrow_downward

Я никогда не использовал Redux-Form, но для отображения проверенного значения по умолчанию для флажка в React по умолчанию вам нужно будет использовать атрибут defaultChecked. Он принимает логическое значение.

<input type="checkbox" defaultChecked={/*bool*/} />
person KA01    schedule 03.01.2017
comment
К сожалению, это мне не помогает. Причина, по которой я хочу установить начальное значение реквизита checked, заключается в том, что я хочу, чтобы флажок был контролируемым компонентом, но в некоторых ситуациях Redux Form изначально устанавливает для свойства checked значение undefined, выдавая мне предупреждение. У меня есть более подробная информация о том, что я хочу сделать, в более раннем и более подробном черновике моего вопроса. - person Kevin; 04.01.2017