Как прочитать значение из реактивной формы из другого компонента

Question

У меня есть следующая база форм на react-hook-form:

function App() {
    const {
        register,
        handleSubmit,
        errors,
        setError,
        clearError,
        formState: { isSubmitting }
    } = useForm();

    const onSubmit = data => {
        alert(JSON.stringify(data));
    };

    return (    
        <form className="App" onSubmit={handleSubmit(onSubmit)}>
            <label>Ethnicity</label>
            <SelectEthnicity/>

            <input disabled={isSubmitting} type="submit" />

        </form>
    );
}

export default App;

SelectEthnicity - это просто компонент-обертка, основанный на выборе следующим образом. Я должен был сделать это, потому что это очень долго выбирать со многими вариантами.

export class SelectEthnicity extends Component {
    state = {

    };

    render() {
        return (
            <div>
                <select name="Selectethnicity">
                    <option value="">Select...</option>
                    <option value="white">White</option>
                    <option value="black">Black</option>
                    <option value="multiracial">Multiracial</option>
                    <option value="european">European</option>
                    <option value="poles">Poles</option>
                    <option value="bashkirs">Bashkirs</option>
                    <option value="slavs">Slavs</option>
                    <option value="russian">Russian</option>
                    <option value="romani">Romani</option>
                    <option value="chechens">Chechens</option>
                    // didn't add all long option. 

                </select>
            </div>
        )
    }
}

export default SelectEthnicity

Как получить выбранный параметр, когда форма отправляется из компонента приложения?

Answer 1

Согласно документации , вам необходимо register свои данные, чтобы связать их с вашей формой. Я бы рекомендовал передать form компоненту SelectEthnicity (или только методу register):

function App() {
  const form = useForm();
  const {
    register,
    handleSubmit,
    errors,
    setError,
    clearError,
    formState: { isSubmitting }
  } = form;
  const onSubmit = data => {
    alert(JSON.stringify(data));
  };

  return (    
     <form className="App" onSubmit={handleSubmit(onSubmit)}>
        <label>Ethnicity</label>
        <SelectEthnicity form={form}/>

        <button disabled={isSubmitting} type="submit" />
     </form>
 );
}

export default App;

Затем зарегистрировать вход с помощью реквизита:

export class SelectEthnicity extends Component {
    ...
    render() {
        return (
            <div>
                <select name="Selectethnicity" ref={this.props.form.register({required: true})}>
                    <option value="">Select...</option>
                    // didn't add all long option. 
                </select>
            </div>
        )
    }
}

export default SelectEthnicity

In Ваша функция отправки теперь должна иметь выбранное значение.