主页

React onChange Event

2024-06-18 05:20PM

参考:https://www.geeksforgeeks.org/react-onchange-event/

React onChange是一个事件处理程序,当输入字段发生任何变化时触发。

此事件捕获输入字段中的更改并执行处理程序函数。当输入字段被修改并失去焦点时,它会被触发。它是当输入字段被修改时更新表单事件之一。

语法:

<input onChange={handleChange} >

范围:

handleChange:这是一个函数调用,其中包含事件触发时要执行的代码

返回类型:

event:这是一个事件对象,包含有关事件的信息,例如:目标元素和值

例如:下面是React onChange事件的简单实现:

1.使用 onChange 事件更新状态

此示例演示了如何使用onChange 事件处理程序来更新 React 中的状态

// src/pages/ExampleOnchange.js

import React, { useState } from 'react';
function ExampleOnchange() {
  const [value, setValue] = useState("");
  function handleChange(e) {
    setValue(e.target.value);
  }

  return (
    <div style={{ textAlign:"center", margin:"auto" }}>
      <h1 style={{ color:"pink" }}>
        React Onchange Event示例
      </h1>
      <h3>
        Example for React onChange Event Handler
      </h3>
      <input value={value} onChange={handleChange} />
      <br/>
      <div>
        User Input: {value}
      </div>
    </div>
  );
}
export default ExampleOnchange;

页面显示内容如下:

没有输入内容:

 

输入内容:

2.使用React onChange 事件

此示例演示了在选择输入中使用 onChange 事件处理程序。

// src/pages/ExampleOnchangeSelect.js

import React, { useState } from 'react';

function ExampleOnchangeSelect() {
  const [value, setValue] = useState('HTML');
  function handleChange(e) {
    setValue(e.target.value)
  }
  return (
    <div style={{ textAlign:"center", margin:"auto" }}>
      <h1  style={{ color:"pink" }}>
        React Onchange Event示例
      </h1>
      <h3>
        Exemple for React onChange Event Handler
      </h3>
      <select value={value} onChange={handleChange}>
        <option value={"HTML"}>HTML</option>
        <option value={"CSS"}>CSS</option>
        <option value={"Java"}>Java</option>
        <option value={"JavaScript"}>JavaScript</option>
      </select>
      <br/>
      <div>
        User Input: {value}
      </div>
    </div>
  );
}
export default ExampleOnchangeSelect;

页面显示内容如下:

选择下拉单的其它内容:

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论