react 基础学习

1.

react绑定属性注意：
    class要换成className

        

<div className={this.state.color}>我是一个红的的div  1111</div>
<div id="box" className='red'>我是一个红的的div---id</div>

    for要换成 htmlFor

<label htmlFor="name">姓名</label>
                <input id="name"  />

    style:
           

错误写法
<div style="color:red'>我是一个红的的 div  行内样式</div>
正确写法
<div style={{"color":'red'}}>我是一个红的的 div  行内样式</div>
<div style={this.state.style}>我是一个红的的 div 行内样式</div>

    其他的属性和以前写法是一样的

2. 引入图片的三种方式

1.import logo from '../assets/images/1.jpg';
 <img src={logo} />
2. <img src={require('../assets/images/1.jpg')} />
远程图片
3.<img src="https://www.baidu.com/img/xinshouye_353af22a7f305e1fb6cfa259394dea9b.png" />

3.for循环的方式

list:['11111111111','222222222222','3333333333333'],            
list2:[<h2 key='1'>我是一个h2</h2>,<h2 key='2'>我是一个h2</h2>],
list3:[
           {title:"新闻11111111"},
           {title:"新闻22222"},
           {title:"新闻33333333"},
           {title:"新闻444444444"}
       ]
render(){

        let listResult=this.state.list.map(function(value,key){

                return <li key={key}>{value}</li>
        })

        return(
            <div className="news">

         2.       {this.state.list2}
                <hr/>

         1.       <ul>
                     {listResult}
                </ul>


                 <hr/>

                <ul>

          3.           {

                        this.state.list3.map(function(value,key){

                            return (<li key={key}>{value.title}</li>);

                        })
                    }
                </ul>

            </div>
        )
    }

4.事件和方法的调用

在以类继承的方式定义的组件中，为了能方便地调用当前组件的其他成员方法或属性（如：this.state），通常需要将事件处理函数运行时的 this 指向当前组件实例。

绑定事件处理函数this的几种方法：

第一种方法：

      run(){

            alert(this.state.name)
      }
      <button onClick={this.run.bind(this)}>按钮</button>

第二种方法：
    构造函数中改变

    this.run = this.run.bind(this);
     run(){

            alert(this.state.name)
      }
     <button onClick={this.run>按钮</button>

第三种方法：（箭头函数）
     run=()=> {
            alert(this.state.name)
      }

    <button onClick={this.run>按钮</button>

 修改值的方法

<button onClick={this.setName.bind(this,'张三')}>执行方法传值</button>

5.事件对象

inputChange=(e)=>{
        // console.log('111');

        //获取表单的值
        console.log(e.target.value);
        this.setState({
            username:e.target.value
        })
    }
<button aid="123" onClick={this.run}>事件对象</button>

6.表单事件（获取input值方法）

一。onChange

1、监听表单的改变事件 onChange

2、在改变的事件里面获取表单输入的值 事件对象

3、把表单输入的值赋值给username this.setState({})

4、点击按钮的时候获取 state里面的username this.state.username

    inputChange=(e)=>{
        // console.log('111');
        //获取表单的值
        console.log(e.target.value);
        this.setState({
            username:e.target.value
        })
    }
    getInput=()=>{

        alert(this.state.username);
    }
<input onChange={this.inputChange}/> <button onClick={this.getInput}>获取input的值</button>

二。ref

1、监听表单的改变事件 onChange

2、在改变的事件里面获取表单输入的值 ref获取

3、把表单输入的值赋值给username this.setState({})

4、点击按钮的时候获取 state里面的username this.state.username

    inputChange=()=>{
        let val=this.refs.username.value;
        this.setState({
            username:val
        })
    }
    getInput=()=>{
        alert(this.state.username);
    }
<input ref="username" onChange={this.inputChange}/> <button onClick={this.getInput}>获取input的值</button>

7.键盘事件

    inputKeyUp=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode==13){
            alert(e.target.value);
        }
    }
    inputonKeyDown=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode==13){
            alert(e.target.value);
        }
    }
<input onKeyUp={this.inputKeyUp}/>
<input onKeyDown={this.inputonKeyDown}/>

8.双向数据绑定

inputChange=(e)=>{
        this.setState({
            username:e.target.value
        })
    }
    setUsername=()=>{
        this.setState({
            username:'李四'
        })

    }
<input  value={this.state.username} onChange={this.inputChange}/> 
<p> {this.state.username}</p>              
<button onClick={this.setUsername}>改变username的值</button>

9.form表单

约束性和非约束性组件:

非约束性组:<input type="text" defaultValue="a" /> 这个 defaultValue 其实就是原生DOM中的 value 属性。

这样写出的来的组件，其value值就是用户输入的内容，React完全不管理输入的过程。

约束性组件：<input value={this.state.username} type="text" onChange={this.handleUsername} />

这里，value属性不再是一个写死的值，他是 this.state.username, this.state.username 是由 this.handleChange 负责管理的。

这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后，由于 this.setState 导致了一次重新渲染。不过React会优化这个渲染过程。看上去有点类似双休数据绑定

    handelSubmit=(e)=>{
            //阻止submit的提交事件 必需要加的
            e.preventDefault();          
            console.log(this.state.name,this.state.sex,this.state.city,this.state.hobby,this.state.info);
    }
    handelName=(e)=>{
        this.setState({
            name:e.target.value
        })
    }

    handelSex=(e)=>{
        this.setState({
            sex:e.target.value
        })
    }

    handelCity=(e)=>{
        this.setState({
            city:e.target.value
        })
    }
    handelHobby=(key)=>{
        var hobby=this.state.hobby;
        hobby[key].checked=!hobby[key].checked;
        this.setState({
            hobby:hobby
        })
    }

    handleInfo=(e)=>{
        this.setState({
            info:e.target.value
        })
    }


 <div>
                <h2>{this.state.msg}</h2>
                <form onSubmit={this.handelSubmit}>
                  用户名:  <input type="text" value={this.state.name}  onChange={this.handelName}/> <br /><br />


                  性别:    <input type="radio" value="1" checked={this.state.sex==1}  onChange={this.handelSex}/>男 

                            <input type="radio"  value="2" checked={this.state.sex==2}  onChange={this.handelSex}/>女 <br /><br /> 
                 居住城市:  

                        <select value={this.state.city} onChange={this.handelCity}>
                            {

                                this.state.citys.map(function(value,key){

                                    return <option key={key}>{value}</option>
                                })
                            }
                            
                        </select>


                <br /><br />
                 爱好:   
                    {
                        // 注意this指向
                        this.state.hobby.map((value,key)=>{
                            return (
                               <span key={key}>
                                    <input type="checkbox"  checked={value.checked}  onChange={this.handelHobby.bind(this,key)}/> {value.title} 
                               </span>
                            )
                        })
                    }
                    <br /><br />
                  备注：<textarea vlaue={this.state.info}  onChange={this.handleInfo} />
                 <input type="submit"  defaultValue="提交"/>
                  <br /><br /> <br /><br />
                </form>

            </div>