react基础（2）—— 表达式，样式，事件，refs

表达式

//1. {单大括号包裹变量(对象，数组，简单数据类型....)}
//2. 变量未定义会报错
//3. {只能是表达式(+-*/,三目....)， 不能是语句if,switch},可以是函数表达式

//4. 注释的写法 {这里面写注释} {//单行} {/*多行*/}

import React,{Component} from "react";

class App extends Component{

    render(){
        return <div>
            {10>20?'aaa':'bbb'}
        </div>
    }

}
export default App;

 

 

样式

1. class -- > className ,
     for -- htmlFor(label)

2. 行内样式(facebook 推荐),注意font-size 的写法

import "./css/index.css";// 模块化方式引入css  css-loader
import React,{Component} from "react";

class App extends Component{
    render(){
        var obj = {
            background:"blue",
            fontSize:'30px'
        }
        return <div>
            <div style={obj}>style样式写法</div>                 
            <div style={{background:'yellow'}}>style样式写法</div>
            <div className="active">class 样式</div>
        </div>
    }
}

export default App;

 

事件、refs

<p><button onClick={this.handleMyClick.bind(this,"aaa","bbbb")}>注册</button></p>

<p><button onClick={()=>{
console.log("click2",this.refs.myname.value,this.refs.mypassword.value)
}}>注册2</button></p>

class App extends Component{
    render(){
        return <div>
            
            用户名<input type="text" ref="myname"  />
            密码<input type="password" ref="mypassword"/>

            <p><button onClick={this.handleMyClick.bind(this,"aaa","bbbb")}>注册</button></p>
            <p><button onClick={()=>{
                console.log("click2",this.refs.myname.value,this.refs.mypassword.value)
            }}>注册2</button></p>
     
        </div>
    }

    handleMyClick(data1,data2){
        console.log(this,data1,data2);
19         console.log("click",this.refs.myname.value,this.refs.mypassword.value)
    }
}

export default App;

 

#################

(1)给标签设置ref="username"
通过这个获取this.refs.username ,ref可以获取到应用的真实dom

给组件设置ref="username"
通过这个获取this.refs.username ,ref可以获取到组件对象

(2) 给标签设置 ref={function(el){myele=ele;}}
访问myele

class App extends Component{
    render(){
        return <div>
            
            用户名<input type="text" ref="myname"/>
            密码<input type="password" ref="mypassword"/>

            <p><button onClick={this.handleMyClick}>注册</button></p>
            <p><button onClick={()=>{
                console.log("click2",this.refs.myname.value,this.refs.mypassword.value)
            }}>注册2</button></p>
     
        </div>
    }

    handleMyClick(){
        //this 丢了 ，找回？ call apply bind
        console.log("click",this.refs.myname.value,this.refs.mypassword.value)
    }
}

export default App;