react 父组件获取子组件输入框的值

最新推荐文章于 2024-07-05 12:39:32 发布

绝妙神

最新推荐文章于 2024-07-05 12:39:32 发布

阅读量3k

点赞数

分类专栏： react typescript

本文链接：https://blog.csdn.net/qq_26540693/article/details/94912371

版权

本文介绍了在React中，父组件如何通过使用`React.createRef()`方法来获取子组件输入框的值，以实现登录功能时的数据交互。

摘要由CSDN通过智能技术生成

最近在做登录的功能
想把输入框的都做成组件
遇到一个问题：父组件form 怎么拿到子组件输入框的值

解决方法：

采用react新提供的
**React.createRef()**方法

具体代码：
父组件代码

import * as React from 'react';
import Pager from "../components/Pager";
import Input from "../components/Input/Input";
class Login extends React.Component{
    private myUsernameRef: React.RefObject<any>;
    private myPasswordRef: React.RefObject<any>;
    constructor(props:any) {
        super(props);
        this.myUsernameRef = React.createRef();
        this.myPasswordRef = React.createRef();
        this.login=this.login.bind(this);
    }
    componentDidMount(): void {
        console.log(this.myUsernameRef);
        console.log(this.myPasswordRef);
    }
    login(){
        console.log(this.myUsernameRef.current.value);
        console.log(this.myPasswordRef.current.value);
    }

    rend