当前位置：首页 > news >正文

【React】React表单组件

news 来源：原创 2024/5/22 7:01:28

在React中，表单组件是用来处理用户输入的重要部分。React提供了多种方式来处理表单，包括受控组件（Controlled Components）和非受控组件（Uncontrolled Components）。同时，表单组件也涉及到一些交互属性，这些属性使得表单元素能够响应用户的操作。

交互属性

交互属性是指那些能够响应用户操作并触发事件的属性。在表单组件中，常见的交互属性包括：

onChange: 当表单元素的值发生变化时触发。
onBlur: 当表单元素失去焦点时触发。
onFocus: 当表单元素获得焦点时触发。
onClick: 当表单元素被点击时触发。
onSubmit: 当表单提交时触发。
这些属性通常与事件处理函数一起使用，以便在用户与表单元素交互时执行特定的操作。

受控组件（Controlled Components）

受控组件是那些其值由React组件的状态控制的表单元素。受控组件的特点是它们的值总是与组件的状态保持同步。当用户与表单元素交互时，事件处理函数会更新组件的状态，从而更新表单元素的值。

以下是一个受控组件的示例：

import React, { useState } from 'react';

function ControlledInput() {
const [inputValue, setInputValue] = useState('');

const handleChange = (event) => {
setInputValue(event.target.value);
};

return (
<form>
<label>
输入值:
<input type="text" value={inputValue} onChange={handleChange} />
</label>
<button type="submit">提交</button>
</form>
);
}
在这个例子中，input元素的值通过value属性与组件的状态inputValue绑定。当用户在输入框中输入文本时，handleChange函数会被调用，更新组件的状态，从而保持输入框的值与状态同步。

非受控组件（Uncontrolled Components）

非受控组件的值不由React组件的状态直接控制，而是由DOM管理。非受控组件的值不会反映到组件的状态中，除非你显式地从DOM中读取它们。这通常通过引用（refs）来实现。

非受控组件通常更简单，因为你不需要为每个表单元素编写状态更新逻辑。但是，它们也不那么灵活，特别是当你需要实时跟踪表单状态或进行复杂验证时。

以下是一个非受控组件的示例：

import React, { useRef } from 'react';

function UncontrolledInput() {
const inputRef = useRef(null);

const handleSubmit = (event) => {
event.preventDefault();
const inputValue = inputRef.current.value;
// 处理inputValue...
};

return (
<form onSubmit={handleSubmit}>
<label>
输入值:
<input type="text" ref={inputRef} />
</label>
<button type="submit">提交</button>
</form>
);
}
在这个例子中，我们使用useRef创建了一个ref，并将其附加到input元素上。当用户提交表单时，我们通过inputRef.current.value从DOM中读取输入框的值。