簡(jiǎn)單案例(點(diǎn)擊提交，查看console輸出)

關(guān)鍵點(diǎn)： 1. 父組件onUserNameChange={(value) => onUserNameChange(value)}
2.子組件在子組件中通過(guò)回調(diào)的方式，將值傳遞給父組件onUserNameChange(value);

1. 子組件添加value和onChange，將input變?yōu)橛袪顟B(tài)組件（有點(diǎn)像vue中的雙向綁定）

import { Input } from "antd";
import React, { useState } from "react";
const UserNameInput = (props) => {
  const { onUserNameChange } = props;
  const [useNameValue, setUserNameValue] = useState();
  const onInputChange = (e) => {
    // Input不是直接是value，要看antd組件庫(kù)中各組件的屬性
    const { value } = e.target;
    // console.log(value, "children value");
    // 將值傳給父組件的回調(diào)函數(shù)
    onUserNameChange(value);
    // 將該組件變?yōu)橛袪顟B(tài)組件，useNameValue改變，組件重新渲染
    setUserNameValue(value);
  };
  return <Input value={useNameValue} onChange={onInputChange} />;
};
export default UserNameInput;
export { UserNameInput };

2. 父組件回調(diào)函數(shù)接收子組件傳過(guò)來(lái)的值，并將值塞進(jìn)form表單中，實(shí)現(xiàn)父子組件通信

import React from "react";
import ReactDOM from "react-dom";
import { UserNameInput } from "./UserNameInput.js";
import "antd/dist/antd.css";
import "./index.css";
import { Form, Input, Button, Checkbox } from "antd";

const Demo = () => {
  const [basicForm] = Form.useForm();
  const onLogin = (values) => {
    basicForm
      .validateFields()
      .then((values) => {
        console.log("Success:", values);
      })
      .catch((errorInfo) => {
        console.error(errorInfo);
      });
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  const onUserNameChange = (value) => {
    // console.log(value, "father value");
    // 將值給form組件
    basicForm.setFieldsValue({ username: value });
  };

  return (
    <Form
      name="basic"
      form={basicForm}
      onFinish={onLogin}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[
          {
            required: true,
            message: "Please input your username!"
          }
        ]}
      >
        <UserNameInput onUserNameChange={(value) => onUserNameChange(value)} />
      </Form.Item>

      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16
        }}
      >
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, document.getElementById("container"));