一一二、react Hooks 父组件调用子组件方法

子组件

// ./hook/Login
import React, { useState, useImperativeHandle } from 'react';

export function Login({ childRef }) {
  const [ name, setName ] = useState('')
  const [ email, setEmail ] = useState('')

  useImperativeHandle(childRef, () => ({
    getValue: () => {
      return {
        username: name,
        pwd: email
      }
    }
  }));

  let loginHandler = (e) => {
    e.preventDefault()
  }

  return (
    <div>
      <h1>Login Component</h1>
      <input type="text" placeholder="Username" value={name} onChange={(e) => setName(e.target.value)}/>
      <input type="password" placeholder="Password" value={email} onChange={(e) => setEmail(e.target.value)}/>
      <button onClick={loginHandler}>Login</button>
    </div>
  )
}

父组件为class

// hoom.js
import React, { Component } from "react";
import { Login } from './hook/Login'

export default class Home extends Component {
  childRef = React.createRef()

  constructor() {
    super();
    this.state = { data: {} }
  }

  _handleGetData = () => {
    const data = this.childRef.current.getValue()
    console.log('data', data)
    this.setState({ data })
  }

  render() {
    const { data } = this.state
    return (
      <div>
        <button onClick={this._handleGetData}>获取子组件的值</button>
        <h2>账号：{data.username}</h2>
        <h2>密码：{data.pwd}</h2>
        <Login childRef={this.childRef}/>
      </div>
    )
  }
}

父组件为hooks

// home.js
import React, { useState, useRef } from "react";
import { Login } from './hook/Login'

const Home = () => {
  const childRef = useRef()
  const [ data, setData ] = useState({})
  const _handleGetData = () => {
    setData(childRef.current.getValue())
  }
  return (
    <div>
      <button onClick={_handleGetData}>获取子组件的值</button>
      <h2>账号：{data.username}</h2>
      <h2>密码：{data.pwd}</h2>
      <Login childRef={childRef}/>
    </div>
  )
}
export default Home