时间戳

首页 > 解决方案 > React/MaterialUI - 如何编辑我的多输入以显示与我的选项不同的占位符？

javascript - React/MaterialUI - 如何编辑我的多输入以显示与我的选项不同的占位符？

问题描述

我有一个输入字段/下拉菜单，其中包含两个 JSON 对象，symbol并且company.

export default function SymbolInput() {

    const [data, setData] = useState({ companies: [] });

    const classes = useStyles();

    useEffect(() => {
        Axios.get("https://app.url.io/").then((res) => {
            setData({ companies: res.data });
        });
    }, [setData]);
    

    return (
        <div className={classes.root}>
            <Autocomplete
                multiple
                options={data.companies}
                getOptionLabel={(option) => option.symbol + ' | ' +  option.company}
                filterSelectedOptions
                renderInput={(params) => (
                <TextField
                    {...params}
                    variant="outlined"
                    label="Companies"
                />
                )}
            />
        </div>
    );

它的样子：

在此处输入图像描述

我想保持下拉菜单不变，当用户使用 选择或输入字段时textfield，我希望公司符号仅显示为占位符，而不是符号 + 公司名称。

例如，上面图像的占位符是A AAPL ABBV ABMD

我怎样才能做到这一点？

标签： javascriptreactjsmaterial-ui

解决方案

查看您的示例代码，看起来AutoComplete'propgetOptionLabel是呈现标签的函数。

现在是

getOptionLabel={(option) => option.symbol + ' | ' +  option.company}

所以只显示符号，它可能只是

getOptionLabel={(option) => option.symbol}

编辑：它看起来AutoComplete也接受一个renderOption道具。如果您希望下拉元素和文本字段具有不同的渲染，请同时使用。

getOptionLabel={(option) => option.symbol + ' | ' +  option.company}
renderOption={(option) => option.symbol}

编辑 2：如果您想要自定义行为，您必须自己跟踪搜索文本并使用filterOptions道具并创建自己的搜索功能。这是一个功能示例的代码框。您必须根据自己的需要对其进行调整。

https://codesandbox.io/s/material-demo-forked-4ibur?file=/demo.js

推荐阅读