Question

我想将表单数据从子组件传递到父组件，因此可以在父组件内部使用它们。但是不知道该怎么做。

子组件

import React, { useState } from 'react';

const InputForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
  };

  return (
    <>
      <Form onSubmit={handleSubmit}>
        <Form.Group>
          <Form.Control
            type='text'
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </Form.Group>

        <Form.Group>
          <Form.Control
            type='email'
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />

        <Button type='submit'>
          Submit
        </Button>
      </Form>
    </>
  );
};

export default InputForm;

父组件

import React from 'react';
import InputForm from './InputForm';
    
const App = () => {
  return (
    <div className='App'>
        <InputForm />
        Name is {name}
        Email is {email}
    </div>
  );
};

export default App;

Answer 1

您有两个选择。您可以实现redux或类似的方法来解除状态耦合，也可以将回调传递给孩子，以将表单数据传递回父组件

React Hooks-如何将道具从子组件传递到父组件

1 个答案: