react---受控组件

清疚 2023-06-06 15:27 31阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel">
        class Control extends React.Component{
            constructor(props){
                super(props);
                this.state = {
                    msg : 'inputVal'
                }
                this.handleClick = this.handleClick.bind(this)
            }
            handleClick(event){
                this.setState({
                    msg:event.target.value
                })
            }
            render(){
                let {msg} = this.state
                return(
                    <div>
                        <input type="text" value={msg} onChange={this.handleClick}/>
                        <p>输入的数据双向绑定</p>
                        <p>{msg}</p>
                    </div>
                )
            }
        }
    
        ReactDOM.render(<Control/>,document.getElementById('app'));
        
        </script>
    </body>
    </html>

类似于input的内容双向绑定

发表评论取消回复

表情：

评论列表（有 0 条评论，31人围观）

还没有评论，来说两句吧...

相关阅读

相关 React-非受控组件

没有受 React 控制，没有设置 `value` 属性的组件就是非受控组件；如果想要获取非受控组件中的值需要通过 DOM 操作，通过 `ref` 属性来获取。步骤： 1

浅浅的花香味﹌/ 2023年07月05日 05:30/ 0 赞/ 31 阅读

相关 React-受控组件

所谓的“受控组件”简单来说就是组件的状态受 React 控制。在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常

港控/mmm°/ 2023年07月04日 15:46/ 0 赞/ 138 阅读

相关 react---受控组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

清疚/ 2023年06月06日 15:27/ 0 赞/ 32 阅读

相关 react受控组件和非受控组件

react受控组件和非受控组件父组件的代码 import Control from './Control' //

深藏阁楼爱情的钟/ 2023年05月31日 15:28/ 0 赞/ 8 阅读

相关 React 受控表单组件

React 受控表单组件受控组件（Controlled Component）：组件的数据受到state组件状态的控制（组件的数据和state组件状态双向绑定）

刺骨的言语ヽ痛彻心扉/ 2023年01月01日 05:50/ 0 赞/ 148 阅读

相关 React中的受控组件

React官网中对于受控组件是这样解释的：渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”

偏执的太偏执、/ 2022年11月02日 13:27/ 0 赞/ 159 阅读

相关 React学习笔记四——受控组件和非受控组件

受控组件页面中所有输入类的DOM，随着输入的值同步的维护到状态中，如需要使用时，直接从状态中获取推荐使用受控组件，可以避免对ref的使用受控组件案例普

雨点打透心脏的1/2处/ 2022年10月09日 06:23/ 0 赞/ 184 阅读

相关 react的受控组件、非受控组件ref

import React from 'react' export default class CommentBox extends React.Componen

今天药忘吃喽~/ 2022年03月28日 04:19/ 0 赞/ 244 阅读

相关受控组件与非受控组件

文章目录受控组件更新state的流程例子非受控组件例子受控组件所谓受控组件就是每当表单的状态发生变

妖狐艹你老母/ 2021年12月12日 23:57/ 0 赞/ 291 阅读

相关 react系列（14）受控组件与非受控组件

受控组件在<input>这类表单元素中，当用户修改输入数据，表单会自动将其赋值到value属性中，这称为HTML元素维持了自身状态。但在react开发中，我们应尽可能的

雨点打透心脏的1/2处/ 2021年09月16日 22:54/ 0 赞/ 320 阅读