如何在 react 中构建一个带有钩子的多功能组件表单?
Posted
技术标签:
【中文标题】如何在 react 中构建一个带有钩子的多功能组件表单?【英文标题】:How to build a multi-functional-component form with hooks in react? 【发布时间】:2020-01-24 01:47:25 【问题描述】:我有一个表单 App.js(父),它呈现构建此表单的两个独立(子)组件:Email.js 和 Button.js。
单击按钮时,警报应显示收集的输入。
据我所知,下面的代码是。有人可以帮我:
-
完成这两个组件并
将它们成功连接到父级 (App.js)?
我把它作为一个练习,展示了它是如何与类组件一起工作的。我很难将其转化为有几个孩子的功能组件。
这是我的 App.js 结构:
import React, useState from 'react';
import Button from './components/Button.js';
import Email from './components/Email.js';
function App()
return (
<div>
<form>
<Email />
<Button />
</form>
</div>
);
export default App;
我的 Email.js:
import React, useState from "react"
function Email()
const [input, inputChange] = useState(email: "")
const handleChange = (event) =>
inputChange([event.target.name]: event.target.value)
return (
<div className = "form-group">
<label>Email adress </label>
<input
type="text"
name="email"
placeholder="Enter your email!"
value = input.email
onChange = handleChange
/>
</div>
)
export default Email
还有我的按钮:
import React, useState from "react"
function Button()
return (
<div>
<button onClick=handleClick>Click me></button>
</div>
)
export default Button
【问题讨论】:
为什么需要将它们放在<form>
标签内?您打算使用浏览器submit
还是html5 表单验证?因为否则我认为您不需要<form>
标签。然后您将使用自己的函数处理提交和验证。
【参考方案1】:
看看这是否适合你:
function App()
const [email,setEmail] = React.useState('hello@world.com');
function changeEmail(event)
setEmail(event.target.value);
function handleClick()
alert('The email entered was: ' + email);
return(
<React.Fragment>
<Email
email=email
changeEmail=changeEmail
/>
<Button
handleClick=handleClick
/>
</React.Fragment>
);
function Email(props)
return(
<input type='email' value=props.email onChange=props.changeEmail/>
);
function Button(props)
return(
<button onClick=props.handleClick>Click</button>
);
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
【讨论】:
以上是关于如何在 react 中构建一个带有钩子的多功能组件表单?的主要内容,如果未能解决你的问题,请参考以下文章