当前位置：网站首页>Today's code farmer girl learned notes about event operation and ref attribute, and did the practice of form two-way binding

Today's code farmer girl learned notes about event operation and ref attribute, and did the practice of form two-way binding

2022-07-27 11:10:00 【Dingdingding】

Event operations
         In virtual dom Call event in , The first letter of the event name should be capitalized , for example ：onClick, The function to be called needs to be changed this Point to , Or define it as an arrow function
    class Header extends React.Component{// Son
                        fun(){
                             this.props.foo("asd")
                         }
                       render(){
                          return (<div><h1 onClick={this.fun}> Click on the I </h1></div>)
                       }
                 }
     Component variables state
    class App extends React.Component{
                           constructor(props){
                              super(props)
                            // Create variables
                             this.state={msg:"hello"}
                         }
                        // Render the page
                        render(){// Variable call under component
                                return (<h1>{this.state.msg}</h1>)
                        }
                }
              ReactDOM.render(
                       (<div>
                           <App />
                     </div>),
                    document.getElementById("app")
             )

refs attribute
       refs yes react One of the special properties of the following , Can be in virtual dom Bind an attribute value in , Under the function, you can directly operate virtual dom Tags and components , In this way, you can manipulate the label style , Text , Properties, etc , Make it easier to get tags
       inpvalue(event){
           this.refs.inp.style.backgroundColor="pink"
                       this.refs.inp.vallue=" good "
      }
       <input type="text" onChange={this.inpvalue} value={this.state.msg} ref="inp"/>

practice ： Make a login interface , There are user name and password boxes on the page
Click button , use react Verify that the user name and password are empty , And give a prompt on the page 

<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:" User name or password cannot be empty "})
                }
                else{
                    this.setState({up:" Login successful "})
                }
            }
            render(){
                return (
                    <div>
                        <p> user name ：<input type="text" onChange={this.fun1} value={this.state.user}/></p>
                        <p> password ：<input type="password" onChange={this.fun2} value={this.state.pwd}/></p>
                        <p><input type="button" value=" Click on " onClick={this.value}/></p>
                        {this.state.up}
                    </div>
                )
            }
        }
        ReactDOM.render(
            (<div>
                <App />
            </div>),
            document.getElementById("app")
        )
    </script>
</body>

原网站

版权声明
本文为[Dingdingding]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/200/202207170003224608.html

边栏推荐

猜你喜欢

随机推荐