如何在反应组件中使用 handleChange()函数？

在输入中输入值时会触发onChange事件。这会触发一个函数handleChange() ，用于为输入设置新状态。

1. 处理单输入

首先，我们必须将输入字段设置为受控组件，以便我们拥有一个受控组件来感知变化并相应地更新状态。

我们将在一个项目的帮助下学习 handleChange()函数，在该项目中我们将使用 handleChange()函数来显示输入的输入。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app handlechangedemo

第 2 步：创建项目文件夹（即 handlechangedemo）后，使用以下命令移动到该文件夹：

cd handlechangedemo

项目结构：它将如下所示。

项目结构

App.js：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

Javascript

import React, { useState } from "react";
  
const App = () => {
  /*  Initial State */
  let [Name, setname] = useState('');
  
  /* The handleChange() function to set a new state for input */
  const handleChange = (event) => {
    setname(event.target.value);
  }
  
  return (
    /* Short-form of React.Fragement*/
    <>
      

        { /* The handleChange() is triggered when text is entered */}
        

          
My Name is 
            {Name}
          
        
      
    
  )
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：

如果用户输入使用handleChange()函数设置的输入，则以下将是输出，如下所示：

2. 处理多输入

在上面的项目中，在App.js文件中写下以下代码，用于处理多个输入。

Javascript

import React, { useState } from 'react';
  
const App = () => {
  let [Fullname, setFullname] = useState({
    fname: '',
    lname: ''
  })
  
  const handleChange = (event) => {
    let value = event.target.value;
    let name = event.target.name;
  
    setFullname((prevalue) => {
      return {
        ...prevalue,   // Spread Operator               
        [name]: value
      }
    })
  }
  
  return (
    <>
      

        

          
Hello {Fullname.fname}
            {Fullname.lname}
          
          
        
      
    
  )
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：

如果用户输入使用handleChange()函数设置的输入，则以下将是输出，如下所示：

说明：我们在多个输入的情况下添加了 name 属性，以便我们可以识别哪个输入字段触发了 处理变化（） 函数。我们使用了扩展运算符，因为当handleChange() 函数已被触发，我们需要fname和lname的当前值（因为只有这样我们才能将输入的输入添加（或分配）到存储在状态对象中的状态变量（ fname和lname ）），所以我们使用了 spread运算符获取现有的状态对象。

this [name]: value 语句如何工作？

此语句将值分配给名称（属性）与该值匹配的输入字段。