为什么react-hook-form在提交时认为选择字段为空？

Question

有人可以向我解释为什么提交后“类别”被认为是空的并触发反应表单钩子的无效调用吗？

我尽可能地简化了代码，但没有剥离可能相互交互的相关部分。

谢谢！

import React from 'react';
import styled from 'styled-components';
import { useForm } from 'react-hook-form';
import * as yup from "yup";
import { yupResolver } from '@hookform/resolvers/yup';

const SelectRoot = styled.div`
    position: relative;
`;

export const SelectOriginal = styled.select`
    width: 100%;
`;

export function Select(props) {
  return (
    <SelectRoot>
      <SelectOriginal {...props} />
    </SelectRoot>
  );
}

const schema = yup
    .object({
        category: yup.string().required(),
    })
    .required();

export default function App() {
  const {
    register,
    handleSubmit,
  } = useForm({ resolver: yupResolver(schema) });

  const onValidSubmit = async (data) => {
        console.log('valid: ', data)
  }

  const onInvalidSubmit = async (errors) => {
        console.log('invalid: ', errors)
  }

  return (
    <div>
      <form onSubmit={handleSubmit(onValidSubmit, onInvalidSubmit)}>
        <Select {...register('category')}>
          <option value="option-1">Option 1</option>
          <option value="option-2">Option 2</option>
        </Select>

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Answer 1

问题的根本原因是此警告，您可能可以在控制台中看到：

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `App`.
    at Select
    at form
    at div
    at App

React Hook Form 需要访问

ref

元素的

select

，在自定义 React 组件中包装 HTML 元素时需要显式传递该元素，就像传递

ref

方法返回的

register

一样直接到自定义组件是行不通的：

ref

是React中保留的prop名称。

const Select = React.forwardRef((props, ref) => {
  return (
    <SelectRoot ref={ref}>
      <SelectOriginal {...props} />
    </SelectRoot>
  )
})