社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
// ./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>
)
}
// 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>
)
}
}
// 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
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!