1

マテリアル UI で使用しています。ボタンをクリックすると、ボックスの値react-hook-formを取得したいと思います。autocomplete select現在label、value私が必要としている年は値でなければなりません

ここに私のコードがあります

https://codesandbox.io/s/react-hook-form-get-started-nt4kh

{ title: "The Godfather", year: 1972 },値を選択すると、 になります1972。現在ボタンをクリックすると、The Godfather理由が表示されますか?

<Autocomplete
        options={top100Films}
        getOptionLabel={option => option.title}
        renderInput={params => (
          <TextField
            {...params}
            inputRef={register}
            label={"Resolution Code"}
            variant="outlined"
            name={"resolutionCode"}
            fullWidth
          />
        )}

ここに画像の説明を入力 />

4

1 に答える 1

1

関連する API ドキュメントはこちら

// From
getOptionLabel={option => option.title}
// To
getOptionLabel={option => option.year.toString()}

更新:
オプションが表示され、異なる属性を使用して選択された値 

renderOption={params => (
  <Typography gutterBottom variant="subtitle1" component="h2">
    {params.title}
  </Typography>
)}
getOptionLabel={option => option.year.toString()}

getOptionLabel

特定のオプションの文字列値を決定するために使用されます。入力 (および renderOption が指定されていない場合はリスト ボックスのオプション) を埋めるために使用されます。

renderOption

function(option: T, state: object) => ReactNode オプション: レンダリングするオプション。state: コンポーネントの状態。

React Hook フォームの編集 - はじめに

追加：
質問は以下のようなものなので

{ title: "The Godfather", year: 1972 } を選択すると、値は 1972 になります。現在ボタンをクリックすると、The Godfather が表示されます。

上記の答えはその要求を処理していると思います。

単にコンソールの値が必要な場合は、選択オプションを複製してはならないため、データから見つけてください。 

  const onSubmit = data => {
    const temp = top100Films.find(x => x.title === data.resolutionCode);
    const value = temp ? temp.year.toString() : "";
    console.log(value);
  };
于 2020-02-07T01:54:35.650 に答える