我有自动完成功能和多项选择权限。
https://codesandbox.io/s/bold-jackson-dkjmb?file=/src/App.js
在示例中,我有 3 个城市选项。当选择某些内容时,如何在 TextField 中手动添加自动添加值?
换句话说:
renderInput={(params) => {
console.log(params);
return (
<TextField
{...params}
variant="outlined"
label="Cities"
placeholder="Enter cities"
autoComplete="off"
InputProps={{
...params.InputProps,
endAdornment: (
<React.Fragment>
{params.InputProps.endAdornment}
</React.Fragment>
)
}}
/>
);
}}
我希望能够添加到params.InputProps.startAdornment渲染文本字段之前的值。
由于每个选定的对象似乎都是非常复杂的对象,我如何手动执行此操作(push() 太复杂了)?任何想法如何我可以添加这样的对象:
手动?
的价值startAdornment
在从下拉列表/复选框中选择一个值之前,该值是未定义的。所以,你可以添加startAdornment
InputProps 的属性如下所示,
import { Chip } from '@material-ui/core';
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
chip: {
margin: theme.spacing(0.5, 0.25)
}
}));
const classes = useStyles();
const handleDelete = (item) => () => {...};
renderInput={(params) => {
console.log(params);
return (
<TextField
{...params}
variant="outlined"
label="Cities"
placeholder="Enter cities"
autoComplete="off"
InputProps={{
...params.InputProps,
startAdornment: (
<Chip
key={"manual"}
tabIndex={-1}
label={"manually added"}
className={classes.chip}
onDelete={handleDelete("blah")}
deleteIcon // requires onDelete function to work
/>
),
endAdornment: (
<React.Fragment>
{params.InputProps.endAdornment}
</React.Fragment>
)
}}
/>
);
}}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)