我正在使用 React Typescript 并有一个自动完成材质 UI 组件。我正在尝试将查询建议添加到自动完成组件中。
我的 graphql 查询如下所示:
查询定义:
import gql from 'graphql-tag';
import {useQuery} from 'react-apollo';
const TODOS = gql`
query todos($id: ID!) {
todo(id: $id) {
id
name
}
}
`;
查询初始化:
const { loading, error, data } = useQuery(TODOS, {
variables: { id }
});
我想创建一个自动完成组件,该组件将从文本字段组件中获取数值并将其传递给自动完成材料 ui 组件?
我的数字组件如下所示:
<TextField
id="filled-number"
label="Number"
type="number"
InputLabelProps={{
shrink: true,
}}
variant="filled"
/>
自动完成组件:
<Autocomplete
id="combo-box-demo"
options={idx.name}
getOptionLabel={(option: {name: string}) => option.name}
style={{width: 300}}
renderInput={params => (
<TextField
{...params}
label="Combo box"
variant="outlined"
/>
那么它应该从数字文本字段组件设置 id,然后将查询传递给自动完成组件吗?
我不知道 idx.name 来自哪里,但它似乎不是一个数组Autocomplete
的财产options
需要数组类型作为值。
你需要通过data.todo
进入Autocomplete
prop options
.
然后你必须让你的 TextField 组件受状态控制。
代码示例:
const Component = () => {
const [id, setId] = useState(%INITIAL_VALUE_IF_NEEDED%);
const { data } = useQuery(DATA, {
variables: { id },
});
const handleId = id => setId(id);
return (
<Fragment>
<TextField {...params}
label="Combo box"
variant="outlined"
onChange={handleChange}
/>
<Autocomplete
id="combo-box-demo"
options={data?.todo || []}
getOptionLabel={(option: {name: string}) => option.name}
style={{width: 300}}
renderInput={params => (
<TextField
{...params}
label="Combo box"
variant="outlined"
/>
)}
</Fragment>
);
}
然后每次 useQuery 中的 id 更新时,您都可以看到选项
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)