将表单输入的值传递给 React 中的兄弟组件

Question

我创建了一个表单，当用户做出选择时，我想将表单输入的值实时传递给同级组件。

我正在使用 react-hook-form 并且能够成功地使用 watch 查看用户输入的值，但我只知道如何将其传递给孩子，而不是兄弟姐妹。

App.js

这是父母

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

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

Form.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;

Message.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 的指导。

非常感谢，

凯蒂

Answer 1

您可以做的是将您的 useForm() 钩子放在 App.js 中，这样两个孩子都可以使用它：

App.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;

Form.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;