react关于受控组件的数据双向绑定

简介: react关于受控组件的数据双向绑定

如果我们给input输入框设置了受控组件,那么在input框是无法直接输入数据的,代码如下:

class TextEdit extends Component {
    state = {
        control:''
    }
    render () {
        return (
            <div>
                <textarea value={this.state.control} name="" id="" cols="30" rows="10"></textarea>
                <br />
                <button>提交</button>
                <button>清空</button>
            </div>
        )
    }
}

此时的input框的值受state内部的control控制,如果想要变成可输入状态,或者是动态更改input框的值,那么需要给输入框加上onChange事件,动态的更改state内的值,代码如下:

class TextEdit extends Component {
    state = {
        control:''
    }
    titleChange = (e) =>{
        this.setState({
            control:e.target.value
        })
    }
    render () {
        return (
            <div>
                <textarea value={this.state.control} name="" id="" cols="30" rows="10" onChange={this.titleChange}></textarea>
                <br />
                <butto>提交</butto>
                <button>清空</button>
            </div>
        )
    }
}
目录
相关文章
|
8天前
|
前端开发 API
react怎么实现父子组件传值?
react怎么实现父子组件传值?
11 1
|
6天前
|
前端开发
掌握React中的useContext:访问父组件数据的神奇技巧
掌握React中的useContext:访问父组件数据的神奇技巧
|
6天前
|
前端开发 JavaScript 开发者
掌握React中的useEffect:函数组件中的魔法钩子
掌握React中的useEffect:函数组件中的魔法钩子
|
6天前
|
存储 前端开发 安全
深入理解React中的useState:函数组件状态管理的利器
深入理解React中的useState:函数组件状态管理的利器
|
6天前
|
前端开发 JavaScript
React Hooks:让你轻松掌握函数组件的状态与管理
React Hooks:让你轻松掌握函数组件的状态与管理
|
6天前
|
存储 前端开发 JavaScript
探索React中的类组件和函数组件
探索React中的类组件和函数组件
|
8天前
|
缓存 前端开发 JavaScript
【亮剑】在React中如何通过点击事件控制组件显示与隐藏,包括基础概念和高级应用
【4月更文挑战第30天】本文介绍了在React中如何通过点击事件控制组件显示与隐藏,包括基础概念和高级应用。使用`useState`钩子和Context API可实现状态驱动的条件渲染,通过CSS类控制组件样式,或利用React Portals在DOM不同位置渲染。性能优化应注意避免不必要的渲染、合理使用Keys、优化事件处理器、使用Memoization及清理资源。测试和验证确保逻辑正确性,以构建动态用户界面并提升应用性能。
|
8天前
|
前端开发 JavaScript 开发者
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(二)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
24 0
|
8天前
|
JavaScript 前端开发 算法
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(一)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
17 0
|
8天前
|
存储 前端开发 JavaScript
React的表单处理:受控组件与非受控组件深入解析
【4月更文挑战第25天】React表单处理涉及受控和非受控组件。受控组件通过状态管理表单数据,每次用户输入都触发状态更新,确保数据同步,适合实时交互但可能影响性能。非受控组件不直接管理状态,数据存储在DOM中,简化代码,适用于更新不频繁的场景,但在数据验证和同步上存在挑战。开发者应根据需求灵活选择。

热门文章

最新文章