理解React中的表单和事件

react 是 Facebook 构建的一个 javascript 库，用于在单页应用程序中组合用户界面。在本教程中，我们将讨论什么是事件，它们如何在 React 中工作，以及如何在 React 应用程序的受控表单上设置事件处理程序。

要学习本教程，只需创建一个新的 React 应用程序create-react-app：

npx create-react-app my-project-name

您还可以在我们的GitHub 存储库中找到本教程的源代码。

React 中的受控输入

受控输入基本上是在 React 中设置输入和表单的一种方式，以便我们可以跟踪它们的值。这涉及将用户输入到输入中的值存储在某种形式的状态中。

例如，考虑以下组件：

import { useState } from "react";

function UserProfile(props) {
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [age, setAge] = useState(0);
    const [password, setPassword] = useState("");

  return (
    <div className="App">
        <h2>Provide your profile details</h2>
        <form>
            <div>
                <label for="name-field">Name</label>
                <input 
                    id="name-field"
                    type="text"
                    value={name}                    
                />            
            </div>

            <div>
                <label for="email-field">Email</label>
                <input 
                    id="email-field"
                    type="text"
                    value={email}                  
                />            
            </div>

            <div>
                <label for="age-field">Age</label>
                <input 
                    id="age-field"
                    type="number"
                    value={age}     
                />            
            </div>

            <div>
                <label for="password-field">Password</label>
                <input 
                    id="password-field"
                    type="text"
                    value={password}
                />            
            </div>
            
            <button type="button">Submit</button>            

        </form>
    </div>
  );
}

export default UserProfile;

您可能已经猜到了，UserProfile这是一个简单的组件，它呈现一个表单，用户可以通过该表单提交他们的个人资料详细信息。您可以将其保存在您的应用文件夹中的src/UserProfile.js中。

该组件中的输入是受控输入。我们首先从 React 导入useState() ，然后继续为各种输入字段定义初始状态。

state 中定义的每个值都直接绑定到其各自的输入。这会在状态和表单输入之间创建双向数据流。

让我们继续并在根组件src/App.jsUserProfile中导入组件：

import UserProfile from './UserProfile';

function App() {
return (
<div className="App">
<UserProfile />
</div>
);
}

最后，让我们更新src/App.css中的 CSS 。将现有文件替换为以下样式：

.App {
  text-align: left;
  margin-left:20%;
  margin-right:20%;
}

label {
  display: inline-block;
  margin-right: 1em;
  width: 4em;
}
input {
  width: 15em;
}

当我们保存文件并运行本地开发服务器时，组件将在应用程序中呈现。

理解React中的表单和事件第1张

表单输入的图像

现在我们已经将视图（表单）绑定到模型（也就是状态）。但是，此时通过表单提供的任何数据都不会存储在状态中。这是因为 React 无法知道用户何时在 UI 上的输入字段中输入内容。

要将状态连接到视图，我们需要在各种表单输入上设置事件处理程序。这将我们带到下一个主题事件。

反应事件

事件是可能由于用户操作或系统生成的事件而触发的操作。事件可以是鼠标点击、网页加载、用户按键或调整窗口大小，以及其他 UI 交互。

为了使我们的组件UserProfile成为一个完全受控的组件，我们需要在输入上设置事件处理程序。下面是name-field输入元素的样子：

                <input 
                    id="name-field"
                    type="text"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                />

您可以以类似的方式更新电子邮件、年龄和密码输入，调用钩子提供的setEmail、setAge和函数。setPassworduseState

onChange只要输入的值发生更改，就会触发该事件。当这个事件被触发时，我们只需调用相关的 setter 方法来用新值更新状态的相应部分。

在 setter 方法中，我们定义了一个回调函数，它将事件 ( e) 作为参数。通过这个事件，我们可以访问用户通过访问输入输入的任何值event.target.value。

现在，通过表单提供的任何数据都将自动存储在状态中。我们可以通过在单击提交按钮时将状态值记录到控制台来观察这一点。首先，创建一个函数来记录状态并将其放在UserProfile返回语句上方的组件中。

    const logState = () => {
        console.log(name);
        console.log(email);
        console.log(age);
        console.log(password);
    }

然后，更新提交按钮以在单击时调用此函数。

            <button type="button" onClick={ logState }>Submit</button>

单击按钮时，值将记录在控制台中。

理解React中的表单和事件第2张

控制台输出

相反，每当状态中的值因任何原因发生更改时，React 都会依次更新我们在输入字段中看到的值。

这也称为数据的双向绑定。也就是说，数据从视图流向状态，从状态流向视图。

在 React 中发射事件

假设我们想将数据从子组件发送到使用它的任何组件（也称为父组件）——我们通过向父组件发出事件来做到这一点。

在我们的例子中，App组件是UserProfile. 我们可以通过发出一个事件来发送状态 from UserProfileto 。App首先，在 UserProfile 组件中创建一个函数来发出事件：

    const emit = () => {
        props.callback({name: name, email: email, age: age, password: password});
    }

然后，更新提交按钮以调用该发出函数。

            <button type="button" onClick={ emit }>Submit</button>

单击按钮时，我们将姓名、电子邮件、年龄和密码的值从状态发送到父组件，App在我们的例子中。

在里面App，我们将导入useState：

import { useState } from 'react';

为表单中的数据创建一个状态：

  const [data, setData] = useState({});

并处理由发出的事件UserProfile：

  return (
    <div className="App">
      <UserProfile callback={importData} />
      <p>Name: {"name" in data ? data["name"] : "No name To Display" }</p>
      <p>Email: {"email" in data ? data["email"] : "No email To Display" }</p>
    </div>
  );

我们首先使用一个空对象导入useState()和实例化它。然后我们定义了importData函数。这是要调用的回调函数UserProfile。此函数从中获取数据UserProfile并用它更新App的状态。

在模板中，我们将此函数传递给UserProfileas props，这正是我们能够从内部访问它的方式UserProfile。

每当我们将值传递到表单输入并单击提交时，这些值将被发送到父级，以显示在模板中：

理解React中的表单和事件第3张