React开始

一起来学React吧（2018.7.19——8）

    本人已经入职，公司前端使用React，作为一名小白还是要从头学起。

---

前段时间因为要去做公司校招的网站，所以这两天没有什么实质的React技术和作品，今天写了一个小的例子，感觉挺好的还没忘。

一个简单的Sass和React例子

---

Learn3.js

import React,{Component} from 'react'
import Learn3A from './Learn3A'
import './Learn3.scss'

class Learn3 extends Component{
    constructor(props){
        super(props);
        this.state={
            comments:[
                {account:"13193169467",name:"cccz1996",edit:false}
            ]
        }
        this.clickToAdd = this.clickToAdd.bind(this);
        this.clickToChange = this.clickToChange.bind(this);
        this.clickToDelete = this.clickToDelete.bind(this);
        this.clickToSave = this.clickToSave.bind(this);
    }
    clickToAdd(){
        this.setState({
            comments:this.state.comments.concat({account:'',name:'',edit:true})
        });
    }
    clickToChange(index){
        var arr = this.state.comments;
        arr[index].edit = true;
        this.setState({comments: arr});
    }
    clickToDelete(index){
        let deleteData = this.state.comments;
        deleteData.splice(index,1);
        this.setState({comments:deleteData});
    }
    clickToSave(index,changeObj){
        let saveData = this.state.comments;
        saveData[index].account = changeObj.account;
        saveData[index].name = changeObj.name;
        saveData[index].edit = false;
        this.setState({comments:saveData});
    }
    render(){
        return(
            <div>
                <div className="addDiv">
                    <button className="addBtn" onClick={this.clickToAdd}>点击添加</button>
                </div>
                <div className="showDiv">
                    <ul>
                        {
                            this.state.comments.map((item,i) => (
                                <li key={i}><Learn3A index={i} data={item} clickToChange={this.clickToChange} 
                                clickToDelete={this.clickToDelete} clickToSave={this.clickToSave}></Learn3A></li>
                            ))
                        }
                    </ul>
                </div>
            </div>
        )
    }
}

export default Learn3;

---

Learn3A.js

import React,{Component} from 'react'

class Learn3A extends Component{
    constructor(props){
        super(props);
        this.edit = this.edit.bind(this);
        this.remove = this.remove.bind(this);
        this.save = this.save.bind(this);
    }
    edit(){
        this.props.clickToChange(this.props.index);
    }

    remove(){
        this.props.clickToDelete(this.props.index);
    }

    save(){
        let valCount = this.refs.new_account.value;
        let valName = this.refs.new_name.value;
        let valObj = {
            account:valCount,name:valName
        }
        this.props.clickToSave(this.props.index,valObj);
    }

    render(){
        const renderNormal = <div>
            <div>
                <div>
                    <p>account:{this.props.data.account}</p>
                    <p>name:{this.props.data.name}</p>
                </div>
            </div>
            <button onClick={this.edit}>编辑</button>
            <button onClick={this.remove}>移除</button>
        </div>
        const renderForm = <div>
             <input ref="new_account" type="text" defaultValue = {this.props.data.account} />
            <div></div>
            <input ref="new_name" type="text" defaultValue = {this.props.data.name} />
            <div className="marginTopDiv"></div>
            <button onClick={this.save}>保存</button>
        </div>
        return(
            <div>
                {this.props.data.edit === true?renderForm:renderNormal}
            </div>
        )
    }
}

export default Learn3A;

---

Learn3.scss

.addDiv{
    text-align: center;
    margin-top: 20px;
}
.addBtn{
    font-size: 20px;
    padding: 6px 100px;
    cursor: pointer;
    background-color: aqua;
    color: white;
    border: none;
    border-radius: 2px;
    &:hover{
        color: beige;
    }
}
.showDiv{
    ul{
        list-style: none;
        li{
            text-align: center;
            div{div{
                input{
                    width: 60%;
                    font-size: 20px;
                    margin-top: 20px;
                    outline: none;
                    padding: 5px;
                    font-weight: bold;
                    border:3px solid black;
                    border-radius: 6px;
                    text-align: center;
                }
                .marginTopDiv{
                    margin-top: 20px;
                }
                button{
                    font-size: 20px;
                    padding: 6px 40px;
                    cursor: pointer;
                    background-color: #ff1f00;
                    color: white;
                    border: 0;
                    border-radius: 2px;
                    margin-right: 40px;
                }
                div{p{
                    font-size: 20px;
                    font-weight: bold;
                    line-height: 2;
                }}
            }}
        }
    }
}

---

效果图如下：