react-hook-form 在组件中用于传递动态文本字段的道具

Question

I have the following component

import React from 'react';
import PropTypes from 'prop-types';
import { useForm } from 'react-hook-form';

export default function FormField({ type, name, formRegister, errorMsg, state }) {
  const methods = useForm();
  const { register } = methods;

  return (
    <>
      <div>
        <label htmlFor={name} className="block text-sm font-medium text-gray-900">
          Password
        </label>

        <div className="mt-1">
          <input
            type={type}
            name={name}
            {...register({ formRegister }, { required: { errorMsg } })}
            className="py-3 px-4 block w-full shadow-sm text-gray-900 focus:ring-blue-700 focus:border-blue-900 border-gray-300 rounded-md"
            onChange={(event) => {state}(event.target.value)}
          />
        </div>
      </div>
    </>
  );
}

FormField.PropTypes = {
  type: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  formRegister: PropTypes.string.isRequired,
  errorMsg: PropTypes.string.isRequired,
  state: PropTypes.string.isRequired
};

FormField.defaultProps = {
  type: 'text',
  name: 'text',
  formRegister: 'text',
  errorMsg: 'text is required',
  state: 'setName'
};

My goal for this component is to create a dynamic field component so I can do the following

<FormField
  type="password"
  name="password"
  formRegister="password"
  errorMsg="Password is required"
  state="setPassword"
/>

However, I'm having issues in passing in the react-form-hooks ...register

I get the following

TypeError: path.split is not a function

Any help would be great, cheers.

Answer 1

You are passing an object to register as the first argument instead of the required string for the field name. Just remove the curly brackets.

<input
  type={type}
  {...register(name, { required: errorMsg })}
  className="py-3 px-4 block w-full shadow-sm text-gray-900 focus:ring-blue-700 focus:border-blue-900 border-gray-300 rounded-md"
/>

You could also simplify your interface by using your name prop as the first argument for your register call. The spread of register will also return a name property set to the name of the first argument you pass to register .

You are also overriding onChange - this is another property that the call of register will return - so you should remove it.