React 函数式组件 子组件给父组件传值2.0

简单案例(点击提交，查看console输出)

关键点： 1. 父组件onUserNameChange={(value) => onUserNameChange(value)}
2.子组件在子组件中通过回调的方式，将值传递给父组件onUserNameChange(value);

1. 子组件添加value和onChange，将input变为有状态组件（有点像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组件库中各组件的属性
    const { value } = e.target;
    // console.log(value, "children value");
    // 将值传给父组件的回调函数
    onUserNameChange(value);
    // 将该组件变为有状态组件，useNameValue改变，组件重新渲染
    setUserNameValue(value);
  };
  return ;
};
export default UserNameInput;
export { UserNameInput };

2. 父组件回调函数接收子组件传过来的值，并将值塞进form表单中，实现父子组件通信

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 (
    

      
         onUserNameChange(value)} />
      

      
        
          Submit
        
      
    
  );
};

ReactDOM.render(, document.getElementById("container"));