react---受控组件

清疚 2023-06-06 15:27 7阅读 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 条评论，7人围观）

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

相关阅读

相关 React-非受控组件

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

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

相关 react---受控组件

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

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

相关 React 非受控表单组件

表单元素不采用value-onChange/checked-onChange方式来对state区中的数据进行双向绑定，我们就说表单元素是非受控表单元素。非受控表单元素需要

拼搏现实的明天。/ 2023年01月02日 03:26/ 0 赞/ 186 阅读

相关 React 受控表单组件

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

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

相关 React中的受控组件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 02-React受控组件及非受控组件、数据渲染、事件处理、组件通信

一、受控组件和非受控组件 React组件的数据渲染是否被调用是通过传递过来的props完全控制控制则为受控组件，否则非受控组件。二、数据渲染 1、条件渲染

「爱情、让人受尽委屈。」/ 2021年07月25日 12:09/ 0 赞/ 405 阅读