React实现双向绑定

最新推荐文章于 2025-06-05 09:07:54 发布

学习使我快乐——玉祥

最新推荐文章于 2025-06-05 09:07:54 发布

阅读量310

点赞数

CC 4.0 BY-SA版权

分类专栏： linux 文章标签： react.js javascript 前端

本文章作者主页，https://blog.youkuaiyun.com/qq_43319748，未经作者允许禁止转载，如有问题，欢迎指正！☺☺☺

本文链接：https://blog.youkuaiyun.com/qq_43319748/article/details/129286341

linux 专栏收录该内容

7 篇文章

订阅专栏

这是一个React组件示例，展示如何创建一个登录界面，包含手机号和验证码输入框。通过onChange和onInput事件处理函数更新state中的值，使用value属性绑定输入框的当前状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

class LoginPhone extends Component{

    state={
        phoneNo:'123450',
        phoneCode:'1234'
    }

    render() {
        return(
            <div>
                <div>
                    <input className="login_index_box_input" 
                           placeholder="请输入手机号"
                           onChange={(e)=>this.setState({phoneNo:e.target.value})} 
                           onInput={(e)=>this.setState({phoneNo:e.target.value})} 
                           type="text" 
                           value={this.state.phoneNo}/>
                </div>
                <div>
                    <input className="login_index_box_input" 
                           placeholder="请输入验证码" 
                           onChange={(e)=>this.setState({phoneCode:e.target.value})} 
                           onInput={(e)=>this.setState({phoneCode:e.target.value})} 
                           type="text" 
                           value={this.state.phoneCode} />
                </div>
            </div>
        )
    }


}