gpt4 book ai didi

javascript - 在 MaterialUI 和 React.js 中为 Autocomplete 分配默认值

转载 作者:行者123 更新时间:2023-12-04 00:01:12 26 4
gpt4 key购买 nike

我想从 React.js 中的 Material UI 向我的 Autocomplete TextField 组件显示默认值。一个预先填充的值,它会自动从用户的配置文件中加载,并且可以使用列表中的另一个值进行更改。

这是我的代码:

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

export const ComboBox =() => {
return (
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" defaultValue="The Godfather" variant="outlined" />}
/>
);
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 }
]

我只看到带有标签的输入字段。
defaultValue 被列为 TextField 和 Autocomplete 的 API,我还尝试将其直接移动到 Autocomplete 下。还是行不通。

最佳答案

您的 defaultValue<AutoComplete />格式应与您的 options 相同, getOptionLable()甚至可以从您的defaultValue 中形成标签。 .
在您的代码中 title字符串的属性是 undefined ,所以什么都没有显示。
这段代码应该可以正常工作:

<Autocomplete
id="combo-box-demo"
options={top100Films}
defaultValue={{ title: "The Godfather", year: 1972 }}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" defaultValue="The Godfather" variant="outlined" />}
/>

关于javascript - 在 MaterialUI 和 React.js 中为 Autocomplete 分配默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61213634/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com