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

【问题标题】：I wanted to show the title on the drop down menu and when some one select an option and submit i wanted the year value should be submitted我想在下拉菜单上显示标题，当有人选择一个选项并提交时，我想提交年份值
【发布时间】：2020-08-21 13:05:25
【问题描述】：

我想在 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;

【问题讨论】：

标签： reactjs forms autocomplete material-ui react-hook-form

【解决方案1】：

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 的函数有一个奇怪的行为。这些函数有时会接收 option 结构（这是我们所期望的），有时会接收一个值（并且此值只有当 options 包含从 1 开始的名为 _id 的属性时才可接受） .

我不知道为什么会这样。可能是Controller 组件与Autocomplete 的组合。也许Autocomplete 包含一些错误。也许Controller 仅以特定方式接受选项。我真的不知道。

所以现在提交时，您收到的数据（例如，如果您选择“肖申克的救赎”）是：

{
   film: 1
}

最后，要获得所选元素的year，您可以这样做

top100Films[data.film - 1].year

Here 代码框示例。

【讨论】：