约束性组件(Controlled Component)和非约束性组件(Uncontrolled Component)是在React中常用的两种表单组件的设计模式。
约束性组件是指其值受React组件的状态(state)控制的组件。在约束性组件中,表单元素的值由React组件的状态维护,并通过onChange
事件处理函数更新状态。每当用户输入发生变化时,状态会被更新,从而保持组件的值与状态的同步。这种模式使得React组件完全控制表单的值和行为。
class ControlledComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ''
};
}
handleChange(event) {
this.setState({ value: event.target.value });
}
render() {
return (
<input
type="text"
value={this.state.value}
onChange={this.handleChange.bind(this)}
/>
);
}
}
非约束性组件是指其值不受React组件状态控制的组件。在非约束性组件中,表单元素的值由DOM自身维护,React组件可以通过ref
属性获取表单元素的值。这种模式更接近传统的HTML表单处理方式,但在处理复杂表单逻辑时可能需要额外的操作。
class UncontrolledComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
handleClick() {
const value = this.inputRef.current.value;
// 处理表单值
}
render() {
return (
<div>
<input type="text" ref={this.inputRef} />
<button onClick={this.handleClick.bind(this)}>Submit</button>
</div>
);
}
}
总的来说,约束性组件提供了更精确的控制和验证,适用于复杂的表单逻辑。非约束性组件则更简洁,适用于简单的表单场景。开发者可以根据具体需求选择适合的模式。