在Redux窗體中，如何設置複選框的選中屬性的初始值？

在我們的終極版表5.3（不6.x的）應用程序，我想渲染<input type="checkbox" />像這樣：在Redux窗體中，如何設置複選框的選中屬性的初始值？

// 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.有沒有辦法設置輔助屬性的初始值，如Redux Form也控制的checked屬性？

來源

2017-01-03 Kevin

您是否嘗試過使用布爾值？ – gustavohenke

它看起來像終極版表格目前有一些錯誤與它如何與複選框的作品，所以我可能對運行起來：https://github.com/erikras/redux-form/issues/334 – Kevin

你可以創建一個在您檢查屬性的簡單的條件，以便當值不確定您剛剛返回false：

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

來源

2017-01-04 04:50:31

我從來沒有用過終極版表格，而是顯示默認在默認情況下選中複選框值做出反應，你需要使用defaultChecked屬性。它接受一個布爾值。

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

來源

2017-01-03 21:11:10

不幸的是，這並未」幫助我。我想設置了'checked'道具的初始值的原因是因爲我想要的複選框，是一個控制組件，但在某些情況下，終極版表格最初設置'checked'屬性未定義的，給我一個警告。我有更多關於我想要做什麼的細節[早期的，我的問題的更長的草案]（http://stackoverflow.com/revisions/41452053/1）。 – Kevin

複選框沒有從文本輸入框不同。您仍然可以將場域對象拆分爲<input>。請參閱v5.3.3Simple Form Example中employed值的使用方法。

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

Redux的形式將檢測到它的（真的它檢測到boolean值）複選框，並使用checked道具。

來源

2017-01-04 15:35:05

我明白如何將字段對象拆分爲''。我想要做的是設置該字段對象包含初始值是什麼。 – Kevin

啊，好吧。我沒看見你最後一句話。不，如果你輸入由Redux的表格控制，則需要通過'initialValues'系統初始化它的價值。 –

在Redux窗體中，如何設置複選框的選中屬性的初始值？

回答

相關問題