在Materialik中使用Material-UI的自动完成组件
卡尔·爱德华兹
当前正在尝试将Material UI的自动完成组件与Formik一起使用。到目前为止，Formik可以很好地处理文本字段和Material-UI中的传统选择。并非如此。Formik的onChange处理函数似乎并未更新my的值city_id。我知道Autocomplete仍然不是Material-UI的核心库的一部分，但是目前仍在查看是否有可能出现这种情况。
import React from "react";
import ReactDOM from "react-dom";
import { Formik, Form } from 'formik';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import Button from '@material-ui/core/Button';
import { cities } from '../data/cities';
import "./styles.css";
const initialValues = {
city_id: '',
};
const submit = params => {
alert(`Value for city_id is: ${params.city_id}`);
};
function App() {
return (
<Formik
initialValues={ initialValues }
onSubmit={ submit }
>
{({
handleChange,
values,
}) => (
<Form>
<Autocomplete
id="city_id"
name="city_id"
options={ cities }
groupBy={ option => option.state }
getOptionLabel={ option => option.name }
style={{ width: 300 }}
renderInput={params => (
<TextField
{ ...params }
onChange={ handleChange }
margin="normal"
label="Cities"
fullWidth
value={ values.city_id }
/>
)}
/>
<Button
variant="contained"
color="primary"
type="submit"
>
Submit
</Button>
</Form>
)}
</Formik>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
文科夫斯基
您的问题是，handleChange这种方式无法正常工作。
如果您查看handleChange文档：
通用输入更改事件处理程序。这将更新values [key]，其中key是发出事件的输入的name属性。如果name属性不存在，handleChange将查找输入的id属性。注意：“输入”在这里表示所有HTML输入。
这应该工作正常，但问题是，TextField里面Autocomplete只会触发handleChange当你输入了东西，和值将是文本，而不是id你想要或其他财产，所以你需要移动handleChange到Autocomplete。
还有另一个问题，您不能handleChange在中使用，Autocomplete因为它没有引用您想要的输入，并且它的参数也不同于正常onChange的input，如您在docs中看到的那样。
onChange
func
值更改时触发回调。
签名：：
function(event: object, value: any) => void
event回调的事件源
value：null
因此，您需要做的就是使用setFieldValue并将其传递给Autocomplete喜欢
onChange={(e, value) => setFieldValue("city_id", value)}
您需要传递字段名称以及想要获得的值。
这是一个有效的例子
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何动态选择Material-UI自动完成组件中的默认选项？
- 2
在Material-ui自动完成组件上设置文本颜色，轮廓和填充
- 3
jQuery自动完成组件
- 4
jQuery自动完成组件
- 5
在jQuery UI自动完成中使用if语句
- 6
组件重新渲染React Material UI时保留“自动完成”值
- 7
自动完成数据源以呈现 ListItem 组件 - [material-ui]
- 8
材质UI自动完成组件未显示反应状态的值
- 9
在Material-UI自动完成中使用react-hook-form控制器的正确方法
- 10
Material UI自动完成的多行选项
- 11
Material-UI-TypeScript-通用自动完成
- 12
Material-UI自动完成渲染值
- 13
Reactjs-通过在自动完成组件（材料UI）中的每个输入更改上点击API来更新选项
- 14
TypeScript中使用jQuery UI自动完成时出错
- 15
如何在自动完成材料ui中使用onchange？
- 16
Material-UI中使用样式组件的媒体查询
- 17
使用jQuery UI自动完成的tokenfield
- 18
在Android Studio中使用Material Design组件
- 19
在redux中使用material-ui？
- 20
Material-UI | 在makeStyles中使用`theme`
- 21
Material-UI自动完成和TextField触发Google自动完成
- 22
如何清除material-ui自动完成字段中的文本？
- 23
从自动完成内失去React Material UI打开模式
- 24
Material-UI <自动完成/>标签与选项值不同
- 25
设置Material UI自动完成的默认值
- 26
Material UI自动完成上的打字稿平等问题
- 27
Material-UI自动完成形式的freeSolo
- 28
通过material-ui自动完成获取所选值的“ ID”
- 29
如何更改Material UI自动完成弹出框的宽度
我来说两句