CoreUI + React Hook 表单

Question

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

import React from 'react';
import {
  CCard,
  CCardBody,
  CCardHeader,
  CCol,
  CRow,
  CForm,
  CFormGroup,
  CInput,
  CLabel,
  CValidFeedback,
  CInvalidFeedback,
  CSelect,
  CInputFile,
  CButton,
  CCardFooter
} from '@coreui/react';
import CIcon from '@coreui/icons-react';
import { useForm } from 'react-hook-form';

const defaultValues = {
  firstName: '',
  lastName: '',
  studentBadgeID: '',
  gender: '',
  dateOfBirth: '',
  class: '',
  religion: '',
  joiningDate: '',
  phone: '',
  admissionNumber: '',
  email: '',
  parentName: '',
  parentAddress: '',
  parentPhone: '',
  parentEmail: ''
};

const AddStudents = () => {
  const { register, handleSubmit, errors } = useForm(defaultValues);
  const onSubmit = data => console.log(data);

  return (
    <CCol xs="12">
      <CCard>
        <CForm onSubmit={handleSubmit(onSubmit)}>
          <CCardHeader>Add Student</CCardHeader>
          <CCardBody>
            <h4>Student Information</h4>
            <CRow className="my-0">
              <CCol lg="6" sm="12">
                <CLabel htmlFor="firstName">First Name</CLabel>
                <CInput
                  className="form-control-success"
                  id="firstName"
                  name="firstName"
                  ref={register({ required: true })}
                />
                <CInvalidFeedback className="help-block">
                  Please provide a valid information
                </CInvalidFeedback>
                <CValidFeedback className="help-block">
                  Input provided
                </CValidFeedback>
              </CCol>
            </CRow>
          </CCardBody>
          <CCardFooter>
            <CButton type="submit" size="sm" color="primary" className="mr-1">
              <CIcon name="cil-scrubber" /> Submit
            </CButton>
            <CButton type="reset" size="sm" color="danger">
              <CIcon name="cil-ban" /> Reset
            </CButton>
          </CCardFooter>
        </CForm>
      </CCard>
    </CCol>
  );
};

export default AddStudents;

Answer 1

我认为这与 CInput 上的 ref 属性有关，根据 CoreUI 文档https://coreui.io/react/docs/components/-Input，这是不允许的。 我在尝试使用不接受 ref-attribute 但 innerRef-attribute 的 CForm 元素中的 ref-attribute 时收到了相同的消息。 如果您尝试验证表单，您可以在示例https://coreui.io/react/demo/3.1.0/#/forms/basic-forms 中查看名为“验证反馈表单”的示例。 问候。

Answer 2

试试

<Controller
  control={control}
  defaultValue={null}
  rules={{ required: true }}
  name="name"
  render={({ onChange, onBlur, value }) => (
    <CInput
      onChange={onChange}
      onBlur={onBlur}
      selected={value}
     />
   )}
 />

更多信息：https://react-hook-form.com/api#Controller