Как использовать форму реагирующего крючка с опорами и пользовательским интерфейсом материала

Question

Я использую Material UI Select в качестве компонента многократного использования, и я хочу проверить его с помощью response-hook-form, передавая реквизиты от родительского к дочернему компоненту. До сих пор я пытался использовать RHF и передать некоторые реквизиты ребенку, но почему-то ошибка не исчезнет, ​​когда я выберу опцию. Это мой код

import React from 'react';
import styled from '@emotion/styled';
import { Select, MenuItem } from '@material-ui/core';
import { ASSelect } from '../../ASSelect';
import { Controller, useForm } from 'react-hook-form';

const { register, handleSubmit, watch, errors, control, setValue } = useForm();
  const onSubmit = (data: any) => {
    console.log(errors);
  };
  
const defaultDashboard = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];
  
const Parent = () => {
  return (
    <Controller
          as={
            <ASSelect
              menuItems={defaultDashboard}
              label="Default dashboard*"
              handleChange={dashboardHandler}
              value={dashboardValue}
          }
          name="Select"
          control={control}
          rules={{ required: true }}
          onChange={([selected]) => {
            return { value: selected };
          }}
        />
        {errors.Select ? <span>Default dashboard is required</span> : null}
    )
 }

export {Parent};

const ASSelect = ({menuItems, label, handleChange, value}) => {
  return (
    <div>
      <Select>
      {menuItems.map((el, index)=> {
        return <MenuItem key={index}>{el.label}</MenuItem>
      }}
    </Select>
    </div>
  )}
  
 export {ASSelect};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Поэтому, когда я отправляю форму, ничего не выбирая, появляется сообщение об ошибке. Но когда я выберу вариант, ошибка останется там. Что я делаю не так?

Answer 1

Вы можете использовать Выбрать с Controller из форм реагирующих крючков следующим образом:

const SelectController = ({ name, menuItems, control }) => (
  <Controller
    as={
      <Select>
        {menuItems.map(({ value, label }, index) => (
          <MenuItem key={index} value={value}>
            {label}
          </MenuItem>
        ))}
        }
      </Select>
    }
    name={name}
    control={control}
    defaultValue=""
    rules={{ required: true }}
  />
);

или использовать Выбрать с setValue из форм реагирующих крюков следующим образом:

const SelectSetValue = ({ name, menuItems, setValue }) => {
  return (
    <Select
      name={name}
      defaultValue=""
      onChange={e => setValue(name, e.target.value)}
    >
      {menuItems.map(({ value, label }, index) => (
        <MenuItem key={index} value={value}>
          {label}
        </MenuItem>
      ))}
      }
    </Select>
  );
};

В обоих случаях вы получаете проверку ошибок изначально при событии onSubmit. Впоследствии отображение ошибок обновляется для SelectController при выборе значения и для SelectSetValue при выборе значения и повторном запуске onSubmit.

Рабочий пример можно проверить по ссылке:
https://codesandbox.io/s/somaterialselecthookform-kdext?file= / src / App. js