[英]React material UI autocomplete is not working with the formik
I have this code snippet, which is written by someone else.我有这个代码片段,它是别人写的。
<FormControl className={classes.formControl}>
<InputLabel id="combo-box-demo">
{values.type === "forAllCustomers" ? "" : ""}
</InputLabel>
<Autocomplete
id="combo-box-demo"
name="customerId"
onBlur={handleBlur}
onChange={handleChange}
value={values.customerId}
options={agents}
getOptionLabel={(option) => option.name}
disabled={values.type === "forAllCustomers"}
renderTags={(value, getTagProps) => {
filteredAgents(values.type).map(
(option, agentId) => (
<Chip
variant="outlined"
label={option.name}
// size="small"
{...getTagProps({ agentId })}
/>
)
);
}}
renderInput={(params) => (
<TextF
{...params}
variant="outlined"
label="Customer"
placeholder="Select"
name="agentId"
/>
)}
/>
</FormControl>
Here we load bunch of agents
.在这里我们加载了一堆
agents
。 If user pick one agent, that agents id
should set as the customerId
.如果用户选择一个代理,则该代理
id
应设置为customerId
。
Here we use formik, so onBlur={handleBlur} onChange={handleChange}
is controlled by the formik.这里我们使用formik,所以
onBlur={handleBlur} onChange={handleChange}
由formik控制。
I tried by setting value
to values.customerId
But it seems not working and also I am getting an error in the console saying我尝试将
value
设置为values.customerId
但它似乎不起作用而且我在控制台中收到错误消息
index.js:1 Material-UI: The
getOptionLabel
method of Autocomplete returned undefined instead of a string for "".index.js:1 Material-UI:自动完成的
getOptionLabel
方法返回未定义,而不是“”的字符串。
How do I fix this issue?我该如何解决这个问题?
Anyhelp!任何帮助!
Thanks in advance.提前致谢。 =)
=)
See, the signature of the function onChange
of AutoComplete
is:看,
AutoComplete
的function onChange
的签名是:
function(event: object, value: T | T[], reason: string) => void
However, signature of handleChange
of Formik is但是,
handleChange
的 handleChange 签名是
handleChange: (e: React.ChangeEvent<any>) => void
The problem is that simply passing onChange={handleChange}
will not do what you think.问题是简单地传递
onChange={handleChange}
不会按照您的想法进行。
See, if you put, before the return
statement a console.log(values)
, you'll see your initialValues
object. However, a change in the Autocomplete will fill this object with strange combo-box-demo-option-0
1, 2 and so on.看,如果你在
return
语句之前放置一个console.log(values)
,你会看到你的initialValues
object。但是,自动完成中的更改将用奇怪combo-box-demo-option-0
1 填充这个 object, 2 等等。 This is because how the Autocomplete component handles the combobox and the name
and id
properties.这是因为自动完成组件如何处理 combobox 以及
name
和id
属性。 According to Formik , handleChange
will look for the name or id to operate, and none have the correspondence you want. 根据 Formik 的说法,
handleChange
会寻找 name 或 id 来操作,没有你想要的对应关系。
Enough said, to fix your problem, you have to use another method provided by Formik: setFieldValue说得够多了,要解决您的问题,您必须使用 Formik 提供的另一种方法: setFieldValue
Your Autocomplete should look something on the lines of:你的自动完成应该看起来像这样:
<Autocomplete
id="combo-box-demo"
name="customerId"
onChange={(e, v) => {
setFieldValue("name", v?.name || "");
setFieldValue("customerId", v?.id || "");
}}
value={values}
options={agents}
getOptionLabel={(option) => option.name || ''}
style={{ width: 300 }}
renderInput={(params) => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>;
You will not need the useState
because you are not handling yourself any state changes.您将不需要
useState
,因为您不处理自己的任何 state 更改。 A regular javascript object will be enough.一个普通的 javascript object 就足够了。
Please check the agents you are getting.请检查您获得的代理。 There might be an issue with your agents data coming from API RESPONSE or from anywhere else.
来自 API RESPONSE 或其他任何地方的代理数据可能存在问题。 According to Material-UI , the parameter you pass to options should be in an Array but your one might be an Object .
根据Material-UI ,您传递给选项的参数应该在数组中,但您的参数可能是Object 。
Please convert the Data type of agents to Array instead of Object if it is not in an Array and it will work!请将代理的数据类型转换为数组,而不是Object如果它不在数组中,它将起作用!
<Autocomplete
id="combo-box-demo"
name="customerId"
onBlur={handleBlur}
onChange={handleChange}
value={values.customerId}
options={agents} //This should be in An Array
getOptionLabel={(option) => option.name} //Then access name
disabled={values.type === "forAllCustomers"}
/>
Please check the Official Docs of Material-UI https://material-ui.com/components/autocomplete/请查看官方文档 Material-UI https://material-ui.com/components/autocomplete/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.