多選反應最終形式

Question

我正在嘗試使用 react-final-form 通過 Material-UI 構建一個具有多值 Select 組件的表單。 不知何故，使用單個選擇，我可以獲得值，但使用多個，則不能。 不知何故，似乎 react-final-form 在內部擁有自己的價值。

這是 Material-UI 中用於構建多個 Select 的指導鏈接：

https://codesandbox.io/s/sr6pf

我試圖在我的表單中復制第一個示例（不使用 react 鈎子），但我仍然錯過了什么？

https://codesandbox.io/embed/react-final-form-material-ui-example-jfmoe

我應該向我的組件添加什么才能使這項工作？

謝謝，

Answer 1

由於某些原因，我設法為我自己的問題找出了解決方案。 正確的答案是創建一個自定義的 MultiSelect 組件，而不是重用來自final-form-material-ui 。

注意：我嘗試使用<Select /> from final-form-material-ui但是向組件添加multiple prop 不會傳遞給 ，這很奇怪。

所以，我的自定義組件看起來像這樣，幾乎類似於他們 github 中添加了multiple prop 的組件。

 import React from 'react'; import FormControl from '@material-ui/core/FormControl'; import FormHelperText from '@material-ui/core/FormHelperText'; import InputLabel from '@material-ui/core/InputLabel'; import Select from '@material-ui/core/Select'; function SelectMulti({ input: { name, value, onChange, ...restInput }, meta, label, formControlProps, ...rest }) { const showError = ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) && meta.touched; return ( <FormControl {...formControlProps} error={showError}> <InputLabel htmlFor={name} shrink> {label} </InputLabel> <Select {...rest} multiple name={name} value={value} onChange={onChange} inputProps={restInput} /> {showError && ( <FormHelperText>{meta.error || meta.submitError}</FormHelperText> )} </FormControl> ); } SelectMulti.propTypes = {}; export default SelectMulti;

希望這對將來的人有所幫助

Answer 2

我能夠通過將fomat設置為這樣來解決這個問題

<Field
 name="concepts"
 component={Select}
 displayEmpty={trie}
 multiple={true}
 value={[]}
 format={value => value || []}
 />

根據https://github.com/erikras/redux-form-material-ui/issues/212#issuecomment-358376925