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还是很陌生，所以努力思考如何做到这一点。任何指导将不胜感激。

非常感谢，

凯蒂

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;

将表单输入的值传递给React中的同级组件

1 个答案: