当前位置：网站首页>今天的码农女孩学习了关于事件操作和ref属性的笔记并做了表单双向绑定的练习

今天的码农女孩学习了关于事件操作和ref属性的笔记并做了表单双向绑定的练习

2022-07-17 00:06:00 【丁丁丁dingdingding】

事件操作
   在虚拟dom中调用事件，事件名首字母要大写，例如：onClick，在调用的函数需要改变this指向，或者定义成箭头函数
   class Header extends React.Component{//子
fun(){
this.props.foo("asd")
}
render(){
return (<div><h1 onClick={this.fun}>点击我</h1></div>)
}
}
   组件变量state
   class App extends React.Component{
   constructor(props){
super(props)
//创建变量
this.state={msg:"hello"}
}
//渲染页面
render(){//组件下的变量调用
return (<h1>{this.state.msg}</h1>)
}
}
ReactDOM.render(
(<div>
<App />
</div>),
document.getElementById("app")
)

refs属性
   refs是react下的一个特殊属性，可以在虚拟dom里绑定一个属性值，在函数下可以直接操作虚拟dom标签和组件，这样就可以操作标签的样式，文本，属性等内容，让获取标签更简单
   inpvalue(event){
   this.refs.inp.style.backgroundColor="pink"
this.refs.inp.vallue="好"
   }
   <input type="text" onChange={this.inpvalue} value={this.state.msg} ref="inp"/>

练习：做一个登录界面，页面上有用户名和密码框
点击按钮，用react验证用户名和密码是否为空，并在页面上给出提示

<body>
    <div id="app"></div>
    <script type="text/babel">
        class App extends React.Component{
            constructor(props){
                super(props)
                this.state={user:"",pwd:"",up:""}
                this.fun1=this.fun1.bind(this)
                this.fun2=this.fun2.bind(this)
                this.value=this.value.bind(this)
            }
            fun1(e){
                var v=e.target.value
                this.setState({user:v})
            }
            fun2(e){
                var v=e.target.value
                this.setState({pwd:v})
            }
            value(){
                var a=this.state.user
                var b=this.state.pwd
                if(a=="" || b==""){
                    this.setState({up:"用户名或密码不能为空"})
                }
                else{
                    this.setState({up:"登录成功"})
                }
            }
            render(){
                return (
                    <div>
                        <p>用户名：<input type="text" onChange={this.fun1} value={this.state.user}/></p>
                        <p>密码：<input type="password" onChange={this.fun2} value={this.state.pwd}/></p>
                        <p><input type="button" value="点击" onClick={this.value}/></p>
                        {this.state.up}
                    </div>
                )
            }
        }
        ReactDOM.render(
            (<div>
                <App />
            </div>),
            document.getElementById("app")
        )
    </script>
</body>

原网站

版权声明
本文为[丁丁丁dingdingding]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_64444606/article/details/125646438

当前位置：网站首页>今天的码农女孩学习了关于事件操作和ref属性的笔记并做了表单双向绑定的练习

今天的码农女孩学习了关于事件操作和ref属性的笔记并做了表单双向绑定的练习

边栏推荐

猜你喜欢

随机推荐