React特征Form 单向数据流示例详解_React_

import * as React from 'react'; const Useremail = props => const Userpassword = props => const SubmitButton = props => const LoginForm = () => { // LoginForm状态变化 => Useremail/Userpassword组件 const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const handleEmail = (e) => { setEmail(e.target.value); }; const handlePassword = (e) => { setPassword(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); alert(email + ' ' + password); }; return ( 
Email
Password
Submit
 ); }; export { LoginForm }; 

import * as React from 'react'; // Useremail/Userpassword组件状态变化 => LoginForm父组件 const Useremail = ({updateUseremail, ...props}) => updateUseremail(e.target.value)} {...props} /> const Userpassword = ({updateUserpassword, ...props}) => updateUserpassword(e.target.value)} {...props} /> const SubmitButton = props => const LoginForm = () => { // LoginForm状态变化 => Useremail/Userpassword组件 const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const handleSubmit = (e) => { e.preventDefault(); alert(email + ' ' + password); }; return ( 
Email
Password
Submit
 ); }; export { LoginForm };