使用 react-select 作为必填字段的 React 钩子表单

Question

I'm trying to validate a react-select input field with react-hook-form.(Required input) But I can't seem to do this with the code block below. Can anyone point me in the right direction?

<Controller
   as={Select}
   options={statusOptions}
   name="status"
   control={control}
   className="infoItemDropdown"
   rules={{ required: true }}
   styles={customStyles}
/>

Answer 1

You can wrapper the component react-select:

import Select from 'react-select';
import React, { useState } from 'react';
import PropTypes from 'prop-types';

const RenderSelect = (props) => {
  const {
    field: {
      value,
      onChange,
    },
    data,
  } = props;

  const [selectedOption, setSelectedOption] = useState();
  const handleChange = (e) => {
    onChange(e.value);
    setSelectedOption(e);
  };

  return (
    <Select
      value={selectedOption}
      onChange={handleChange}
      options={data}
    />
  );
};
RenderSelect.propTypes = {
  data: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
      ]).isRequired,
      label: PropTypes.string.isRequired,
    }),
  ).isRequired,
  field: PropTypes.shape({
    value: PropTypes.oneOfType([
      PropTypes.string.isRequired,
      PropTypes.number.isRequired,
    ]),
    onChange: PropTypes.func.isRequired,
  }),
};

RenderSelect.defaultProps = {
  field: { onChange: () => {}, value: '' },
};

export default RenderSelect;

And use it in react hook form:

export default function MyForm() {
  const {
    handleSubmit,
    formState: { isValid },
    control,
  } = useForm({ mode: 'onChange' });

  const onSubmit = (values) =>{
    console.log(values)
  };

  const data = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
  ];
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="select_something"
        control={control}
        rules={{ required: true }}
        render={({ field }) => (<RenderSelect field={field} data={data}/>)
        }
      />
      <button
        disabled={!isValid}
        type="submit"
      >
        Save
      </button>
    </form>
  );
}

This way disable the button submit if the select not has a value.