如何在 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 

【问题讨论】:

为什么需要将它们放在&lt;form&gt; 标签内?您打算使用浏览器submit 还是html5 表单验证?因为否则我认为您不需要&lt;form&gt; 标签。然后您将使用自己的函数处理提交和验证。 【参考方案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 中构建一个带有钩子的多功能组件表单?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用钩子将 React 类组件转换为功能组件

如何使用带有钩子的 react-native-action-sheet

反应“错误:超过最大更新深度。”带有功能组件和钩子

如何重用带有钩子的 React 库

如何将firebase与react功能组件同步?

如何使用钩子将项目附加到 React 组件中的数组?