我正在尝试通过Material-UI使用react-final-form构建具有多个值的Select组件的表单。以某种方式使用单个“选择”,我可以获得值,但是使用多个,则没有。某种程度上,似乎React-final-form在内部保持着自己的价值。
这是Material-UI的指导链接,用于构建多个Select:
https://codesandbox.io/s/sr6pf
我尝试在表单中复制第一个示例(不使用react钩子),但我仍然错过了什么?
https://codesandbox.io/embed/react-final-form-material-ui-example-jfmoe
我应该在我的组件中添加些什么以使其起作用?
谢谢
答案 0 :(得分:0)
由于某些原因,我设法为自己的问题找出解决方案。正确的答案是创建一个自定义的MultiSelect组件,而不是重复使用final-form-material-ui
中的组件。
注意:我尝试使用<Select />
中的final-form-material-ui
,但是将multiple
属性添加到组件不会传递给,这很奇怪。
因此,我的自定义组件看起来像这样,几乎类似于their github中添加了multiple
道具的组件。
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;
希望这对以后的人有帮助
答案 1 :(得分:0)
我可以这样设置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