我想在下拉菜单上显示标题，当有人选择一个选项并提交时，我希望年份值应该提交

问题描述

我想在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代码和框示例。