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

Question

В нашем 5.3 (не 6.x) приложение Redux формы, я хочу вынести <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 перед выполнением моих тестов. I know I can set the initial value of fields in Redux Form. Есть ли способ установить начальное значение вспомогательного свойства, такого как свойство checked, которое также управляет формой Redux?

Answer 1

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

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

Answer 2

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

<input type="checkbox" defaultChecked={/*bool*/} /> 

Answer 3

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

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

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