一起来学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;
}}
}}
}
}
}
效果图如下: