如何解决我想在下拉菜单上显示标题,当有人选择一个选项并提交时,我希望年份值应该提交
我想在material-ui自动完成下拉菜单上显示标题,当有人选择一个选项并提交时,我希望年份值应提交(注册到RHF)。
import React from "react";
import { useForm,Controller } from "react-hook-form";
import { TextField } from "@material-ui/core";
import Autocomplete from "@material-ui/lab/Autocomplete";
function App() {
const { control,handleSubmit,register } = useForm();
const onSubmit = (data) => console.log(data);
const top100Films = [
{ title: "The Shawshank Redemption",value: 1994 },{ title: "The Godfather",year: 1972 },{ title: "The Godfather: Part II",year: 1974 }
];
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => (
<TextField
{...params}
inputRef={register}
name="formfield"
label="Combo box"
variant="outlined"
/>
)}
/>
<input type="submit" />
</form>
);
}
export default App;
解决方法
Ciao,最后我找到了解决此问题的方法。这是代码:
import React from "react";
import "./styles.css";
import { useForm,Controller } from "react-hook-form";
import { TextField } from "@material-ui/core";
import { Autocomplete } from "@material-ui/lab";
const top100Films = [
{ _id: 1,title: "The Shawshank Redemption",year: 1994 },{ _id: 2,title: "The Godfather",year: 1972 },{ _id: 3,title: "The Godfather: Part II",year: 1974 }
];
export default function App() {
const { register,handleSubmit,control } = useForm();
const getOpObj = (option) => {
if (!option) return option;
if (!option._id) option = top100Films.find((op) => op._id === option);
return option;
};
const onSubmit = (data) => {
console.log(top100Films[data.film - 1].year);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Controller
name="film"
as={
<Autocomplete
options={top100Films}
getOptionLabel={(option) => getOpObj(option).title}
style={{ width: 300 }}
getOptionSelected={(option,value) => {
if (!option) return option;
return option._id === getOpObj(value)._id;
}}
renderInput={(params) => (
<TextField
{...params}
name="formfield"
label="Combo box"
variant="outlined"
/>
)}
/>
}
onChange={([,obj]) => {
const op = getOpObj(obj);
if (op) return getOpObj(obj)._id;
return null;
}}
control={control}
defaultValue={null}
/>
<input type="submit" />
</form>
);
}
说明:
如您所见,top100Films
现在包含一个附加属性_id
。之所以需要它,是因为我在getOptionLabel
,getOptionSelected
和onChange
的函数中发现了奇怪的行为。这些功能有时接收选项结构(这是我们所期望的),有时接收一个值(该值是可接受的仅当选项包含称为属性_id
,从1 强启动>)。
我不知道为什么会这样。也许是Controller
组件和Autocomplete
的组合。也许Autocomplete
包含一些错误。也许Controller
仅以特定方式接受选项。我真的不知道。
因此,现在提交后,您收到的数据(例如,选择“肖申克的救赎”)是
{
film: 1
}
最后,要获得所选元素的year
,
top100Films[data.film - 1].year
Here代码和框示例。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。