Передайте значение ввода формы в компонент-брат в React

Question

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

Я использую форму реагирования и могу успешно использовать часы , чтобы увидеть, какие значения вводит пользователь, но я знаю только, как передать это ребенку, а не родной брат.

Приложение. js

Это родительский элемент

import React from 'react'
import Form from './Form';
import Message from './Message';

const App = () => {
  return (
     <div>
           <Form />
           <Message/>
     </div>
  );
};
export default App;

Форма. js

Это ребенок.

import React from 'react';
import { useForm } from 'react-hook-form';
import { Select, MenuItem } from '@material-ui/core';
import { Controller } from 'react-hook-form';

function Form() {

const {control, watch } = useForm();    
const watchDiet = watch('diet');

return(
   <form>
          <label htmlFor="diet">Dietary requirements</label>
          <Controller
            as={
              <Select name="diet">
                  <MenuItem value="meat">Meat eater</MenuItem>
                  <MenuItem value="veggie">Vegetarian</MenuItem>
                  <MenuItem value="vegan">Vegan</MenuItem>
                ))}
              </Select>
            }
            control={control}
            name="diet"
            id="diet"
          />

    </form>
);
}
export default Form;

Сообщение. js

Это брат ребенка. Я хотел бы передать значения в этот компонент

import React from 'react';
const Message= (props) => {
  return (
      <div>
           If the user selects "Meat eater" in Form.js I want to 
           pass the value "meat" into this component
       </div>);
};
export default Message;

Я довольно новичок в React, поэтому изо всех сил думаю, как это сделать. Wny руководство будет высоко ценится.

Большое спасибо,

Kat ie

Answer 1

Что вы можете сделать, это вставить свой useForm() крючок в App.js, чтобы он был доступен для обоих детей:

Приложение. js

import React from 'react'
import Form from './Form';
import Message from './Message';
import { useForm } from 'react-hook-form';

const App = () => {
    const { watch, control } = useForm();    

    return (
        <div>
            <Form 
                watch={watch}
                control={control}
            />
            <Message
                watch={watch}
            />
        </div>
    );
};
export default App;

Форма. js

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

const Form = ({ watch, control }) => {
    const watchDiet = watch('diet');

    return(
        <form>
            <label htmlFor="diet">Dietary requirements</label>
            <Controller
                as={
                    <Select name="diet">
                        <MenuItem value="meat">Meat eater</MenuItem>
                        <MenuItem value="veggie">Vegetarian</MenuItem>
                        <MenuItem value="vegan">Vegan</MenuItem>
                    </Select>
                }
                control={control}
                name="diet"
                id="diet"
            />

        </form>
    );
}
export default Form;