广东省住房和城乡建设厅,网站优化网站建站教程,深圳外贸建站及推广,网站建设中单页面React中的组件可以分为受控组件和非受控组件#xff1a;
受控组件#xff1a;受控组件是指组件的值受到React组件状态的控制。通常在组件中#xff0c;我们会通过state来存储组件的值#xff0c;然后再将state的值传递给组件的props#xff0c;从而实现组件的双向数据绑定…React中的组件可以分为受控组件和非受控组件
受控组件受控组件是指组件的值受到React组件状态的控制。通常在组件中我们会通过state来存储组件的值然后再将state的值传递给组件的props从而实现组件的双向数据绑定。
例如一个input输入框的value值就是一个受控组件其值受到state的控制
class InputComponent extends React.Component {constructor(props) {super(props);this.state { value: };this.handleChange this.handleChange.bind(this);}handleChange(event) {this.setState({ value: event.target.value });}render() {return (input typetext value{this.state.value} onChange{this.handleChange} /);}
}非受控组件非受控组件是指组件的值不受React组件状态的控制通常是在组件中获取DOM元素的值然后进行操作。
例如一个input输入框的defaultValue值就是一个非受控组件其值由DOM元素控制
class InputComponent extends React.Component {constructor(props) {super(props);this.inputRef React.createRef();this.handleClick this.handleClick.bind(this);}handleClick(event) {console.log(this.inputRef.current.value);}render() {return (divinput typetext defaultValuedefault ref{this.inputRef} /button onClick{this.handleClick}Get Input/button/div);}
}总的来说受控组件和非受控组件的选择取决于具体的业务需求和开发者的个人习惯。在大多数情况下如果需要实现表单的双向数据绑定就应该使用受控组件而如果需要获取DOM元素的值就应该使用非受控组件。
