05月01, 2018

React学习之旅 (05) -- 关于事件 & 条件渲染 & 列表渲染

对于事件的一个小总结:和HTML身上添加事件类似,区别:

  1. React事件,采用驼峰命名
  2. 采用jsx语法,函数不能放到字符串中,要放到 {} 中
  3. 阻止默认行为,不太相同

矫正React事件this几种解决方式,不多废话,直接上栗子:

class AddNum extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            num: 0
        };
        this.fnClick2 = this.fnClick2.bind(this);
    }
    fnClick1 (){
        let num = this.state.num;
        this.setState({
            num: num + 1
        });
    };
    fnClick2 (){
        let num = this.state.num;
        this.setState({
            num: num + 1
        });
    };
    fnClick3 (){
        let num = this.state.num;
        this.setState({
            num: num + 1
        });
    };
    fnClick4 = () => {
        let num = this.state.num;
        this.setState({
            num: num + 1
        });
    };
    render() {
        return (<div>
            <h2>{this.state.num}</h2>
            <button onClick={this.fnClick1.bind(this)}>点击增加1</button>
            <button onClick={this.fnClick2}>点击增加2</button>
            <button onClick={()=>this.fnClick3()}>点击增加3</button>
            <button onClick={this.fnClick4}>点击增加4</button>
        </div>)
    }
};

ReactDOM.render(<AddNum />, 
document.getElementById('root'));

关于ev小事情

  1. ev碰到传参的时候,ev放到最后

条件if:React中条件渲染和JS保持一致,使用if,三目,&&(条件运算符)


列表:React通过 {arr} 在内部构建一个元素集合,就是变量里面放一堆React元素(每个元素需要一个key, 这个key需要保持唯一,比如用index,或者随机数)。不废话,上代码:

let {Component} = React;
class Demo extends Component {
    constructor() {
        super();

        this.state = {
            arr: ['捡漏1', '捡漏2', '捡漏3']
        }
    }
    render(){
        let arr = [];
        this.state.arr.forEach(function (item, index){
            arr.push(<p key={index}>{item}</p>)
        });
        return <div>{arr}</div>
    }
};
ReactDOM.render(<Demo />,
document.getElementById('root'));

本文链接:http://www.laijianlou.top/post/react-05.html

-- EOF --

Comments