react的受控于非受控组件

最新推荐文章于 2025-11-04 17:14:48 发布

原创最新推荐文章于 2025-11-04 17:14:48 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

知识点专栏收录该内容

11 篇文章

订阅专栏

本文深入探讨了React中的受控与非受控组件概念，详细解释了两者的区别及应用场景。受控组件通过state管理表单数据，确保数据一致性；而非受控组件则利用DOM节点维护数据，简化了数据处理流程。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.js"></script>
</head>
<body>
    
    <div id="box"></div>
    <script type="text/babel">
        //受控与非受控组件
        //表单元素他的值来自于state，那么这个组件就是受控组件，否则就是非受控组件。
        //受控组件
        /*
            在大多数情况下，我们推荐使用 受控组件 来处理表单数据。
            在一个受控组件中，表单数据是由 React 组件来管理的。
            另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。

            
            由于在表单元素上设置了 value 属性，因此显示的值将始终为 this.state.value，
            这使得 React 的 state 成为唯一数据源。由于 handlechange 在每次按键时都会执行并更新 React 的 state，
            因此显示的值将随着用户输入而更新。
        */
        /* class App extends React.Component{
            constructor(){
                super()
                this.state = {
                    value:"111"
                }
            }
            handleChange = (e)=>{
               this.setState({
                   value:e.target.value
               }) 
            }
            render(){
                return (
                    <div>
                        <input type="text" value={this.state.value} onChange={this.handleChange}/>   
                        <p>{this.state.value}</p>
                    </div>
                )
            }
        }
        ReactDOM.render(<App/>,document.getElementById("box")) */



        //非受控组件  这时候数据由DOM自身进行维护
        //要编写一个非受控组件，而不是为每个状态更新编写对应的数据处理函数，
        //可以使用ref来从DOM节点中获取表单数据。

        class App extends React.Component{
            handleSubmit = (e)=>{
                console.log(this.input.value)
                e.preventDefault()
            }
            render(){
                return (
                    <form onSubmit={this.handleSubmit}>
                        <input type="text" ref={el=>this.input=el}/>    
                        <input type="submit"/>
                    </form>
                )
            }
        }
        ReactDOM.render(<App/>,document.getElementById("box")) 
    </script>
</body>
</html>