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;
页面显示内容如下：
选择下拉单的其它内容：
登录
请登录后再发表评论。
评论列表:
目前还没有人发表评论