如何在react组件中使用handleChange()函数

handleChange()在React 中不是一个内置的函数，但正如它的名字所示，我们可以定义它来处理用户在输入中的变化。在react中，当用户在输入框中输入一些值时，我们需要处理输入，使其可编辑。

在这里，我们将学习如何使用handleChange()函数来处理单个和多个输入。

在功能组件中使用handleChange()函数

在react中，我们可以用函数关键字定义组件，并称它们为功能组件。在使用功能组件时，我们可以使用钩子来管理输入值。

语法

用户可以按照下面的语法来使用handleChange()函数和功能组件。

function handleChange(event) {
   let value = event.target.value;
}  
<input type = "text" onChange = {handleChange} value = {value} />

在上面的语法中，我们使用了onChange事件属性，只要输入值发生变化，就会调用handleChange()函数。在handleChange()函数中，我们可以使用 “event.target.value “获得一个新的输入值。

例子

在下面的例子中，我们已经创建了一个包含文本输入字段的功能组件。同时，我们在功能组件中添加了 handleChange() 函数。

在handleChange()函数中，我们获取更新的输入值，并使用钩子将其设置为值变量。此外，我们还在输出中显示’value’变量的值。

import React from "react";
import { useState } from "react";

function App() {
   const [value, setValue] = useState("Initial");
   function handleChange(event) {
      // gives the value of the targetted element
      let value = event.target.value;
      setValue(value);
   }
   return (
      <div>
         <h3>
            Using the <i> handleChange() function </i> with inputs in React
            functional components.
         </h3>
         <input type = "text" onChange = {handleChange} value = {value} />
         <br/>   <br/>
         <div style = {{ color: "blue" }}>
            {" "}
            The text entered in the input field is {value}.{" "}
         </div>
      </div>
   );
}
export default App;

输出

如何在react组件中使用handleChange函数

例子

在下面的例子中，我们在一个单一的功能组件中创建了多个输入。我们使用单一的handleChange()函数来处理所有的输入。在handleChange()函数中，我们可以使用’event.target.name’获得输入的名称，基于这个名称，我们使用该函数来设置输入的值。

用户可以在输入框中输入数值，观察单个handleChange()函数如何处理所有的输入。

import React from "react";
import { useState } from "react";

function App() {
   const [id, setId] = useState("1");
   const [firstName, setFirstName] = useState("Shubham");
   const [lastName, setLastName] = useState("Vora");
   const [age, setAge] = useState(22);
   function handleChange(event) {
      // gives the value of the targetted element
      let value = event.target.value;
      let inputName = event.target.name;
      if (inputName == "id") {
         setId(value);
      } else if (inputName == "fname") {
         setFirstName(value);
      } else if (inputName == "lname") {
         setLastName(value);
      } else {
         setAge(age);
      }
   }
   return (
      <div>
         <h3>
            Using the <i> handleChange() function </i> with inputs in React
            functional components.
         </h3>
         <label for = "Id"> Id </label>
         <br />
         <input type = "text" id = "Id" name = "id" onChange = {handleChange} value = {id} />
         <br /> <br />
         <label for = "fname"> First Name </label>
         <br />
         <input
            type = "text"
            id = "fname"
            name = "fname"
            onChange = {handleChange}
            value = {firstName}
         />
         <br /> <br />
         <label for = "lname"> Last Name </label>
         <br />
         <input
            type = "text"
            id = "lname"
            name = "lname"
            onChange = {handleChange}
            value = {lastName}
         />
         <br /> <br />
         <label for = "age"> Age </label>
         <br />
         <input
            type = "text"
            id = "age"
            name = "age"
            onChange = {handleChange}
            value = {age}
         />
         <br /> <br />
      </div>
   );
}

export default App;

输出

如何在react组件中使用handleChange函数

使用handleChange()函数与类组件一起使用

我们可以使用ReactJS中的class关键字创建类组件。我们不能使用钩子来管理类组件的变量。所以，我们需要对类组件使用状态。

另外，只要我们在类组件中使用handleChange()方法，我们就需要在构造函数中绑定该方法。

语法

用户可以按照下面的语法来使用类组件的handleChange()函数。

handleChange(event) {
   this.state.text = event.target.value;
}
<input onChange = {this.handleChange} name = "text" />

在上述语法中，只要输入值发生变化，我们就会更新状态值。

例子

在下面的例子中，我们已经创建了一个包含输入字段的类组件。我们还在输入栏上添加了 handleChage() 方法。

每当用户改变输入值时，我们就调用handleChange()方法，更新该组件的状态。

import React from "react";

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         text: "Sample",
      };
      this.handleChange = this.handleChange.bind(this);
   }
   handleChange(event) {
      this.state.text = event.target.value;
   }
   render() {
      return (
         <div>
            <h2>
               {" "}
               Using the <i> handleChange() function </i> in ReactJs with class
               components.{" "}
            </h2>
            <input onChange = {this.handleChange} name = "text" />
         </div>
      );
   }
}
export default App;