当前位置：网站首页>今天的码农女孩学习了关于事件操作和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

边栏推荐

猜你喜欢

随机推荐