专栏首页菜鸟计划react入门(五):事件处理、条件渲染、列表&keys、表单

react入门(五):事件处理、条件渲染、列表&keys、表单

一、事件处理

React事件绑定属性的命名采用驼峰式写法,而不是小写。

直接看代码

两种方式绑定事件并传参数

第一种:

constructor(props) {
    super(props);
    //在dom上用bind函数绑定了this,这里可以省略
    this.handleClick = this.handleClick.bind(this);
}

handleClick(value, e) {
    //e要写在value后面
    console.log(value);     //2020/1/13 下午7:09:35
    console.log(e.target);  //<button>handle</button>
}

<button onClick={(e) => {this.handleClick.bind(this,this.state.time)}}>handle</button>


第二种(更倾向于第二种)

 handleClick = (value, e)=> {
    console.log(value);     //2020/1/13 下午7:09:35
    console.log(e.target);  //<button>handle</button>
}

<button onClick={(e) => {this.handleClick(this.state.time, e)}}>handle</button>

二、条件渲染

直接看代码

render() {
    let button = null;
    //1.可以根据变量的不同选择不同的渲染
    if (this.props.flag) {
        button = <button>show</button>
    } else {
        button =  <button>hide</button>
    }
    return (
        <div>
            {button}
            //2.可以在jsx中直接判断
            {this.state.num > 0 && button}
        </div>
    )
}

三、列表与keys

直接看代码

render() {
    //1.先定义变量获取渲染元素,然后进行渲染
    const numbers = [1, 2, 3, 4, 5];
    const listItems = numbers.map((number) =>
        <li key={number.toString()}>{number}</li>
    );
    return (
        <div>{listItems}</div>
    )
    
    //2.直接在jsx中处理
    return (
        <div>{numbers.map((number) => <li key={number.toString()}>{number}</li>)}</div>
    )
}

关于keys

Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。当子节点有key时,React使用key来匹配原本树的子节点和新树的子节点。因此你应当给数组中的每一个元素赋予。

万不得已,你可以传递他们在数组中的索引作为key。若元素没有重排,该方法效果不错,但重排会使得其变慢。当索引用作key时,组件状态在重新排序时也会有问题。 组件实例基于key进行更新和重用。如果key是索引,则item的顺序变化会改变key值。这将导致非受控组件的状态可能会以意想不到的方式混淆和更新。

Keys应该是稳定的,可预测的,且唯一的。不稳定的key(类似由Math.random()生成的)将使得大量组件实例和DOM节点进行不必要的重建,使得性能下降并丢失子组件的状态。

四、表单

直接看代码

//1.使用受控组件实现表单(利用state的改变)
export default class Form extends React.Component{
    constructor () {
        super();
        this.state = {
            name: 'zs',
            age: 23
        }
    }
    handle = (e)=> {
        let name = e.target.name;
        //根据不同的控件名称来修改不同控件的值
        this.setState({
            [name]: e.target.value
        })
    }
    render() {
       return (
           <div>
               <input name={'name'} value={this.state.name} onChange={(e)=>{this.handle(e)}}/>{this.state.name}
               <input name={'age'} value={this.state.age} onChange={(e)=>{this.handle(e)}}/>{this.state.age}
           </div>
       )
    }
}

<input>, <textarea>和 <select> 都十分类似 - 他们都通过给value传入一个属性加上事件操作来实现对组件的控制。


//2.使用非受控组件实现表单(从ref中获取dom的值)
export default class Form extends React.Component{
    constructor () {
        super();
        this.state = {
            name: 'zs',
            age: 23
        }
    }
    handle = (e)=> {
        let name = e.target.name;
        this.setState({
            [name]: this[name].value
        })
    }
    render() {
        return (
            <div>
                <input name={'name'} defaultValue={this.state.name} ref={input => {this.name = input}} onChange={e => this.handle(e)}/>{this.state.name}
                <input name={'age'} defaultValue={this.state.age} ref={input => {this.age = input}} onChange={e => this.handle(e)}/>{this.state.age}
            </div>
        )
    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • react入门(三):state、ref & dom简解

    作用:组件内部的状态重新更新时,可以控制组件内部重新渲染(不需要重新调取组件也可以重新渲染)

    柴小智
  • 写一个简单的轮播组件

    柴小智
  • javascript 函数详解

    一、函数的一些基础概念: 1.js中的函数使用function来声明。 2.关于return: 2.1  函数在执行到return语句后悔立即停止并退出,ret...

    柴小智
  • JavaScript常见的六种继承方式

    面向对象编程很重要的一个方面,就是对象的继承。A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法。这对于代码的复用是非常有用的。

    Javanx
  • 设计模式专题(二十三) ——解释器模式

    设计模式专题(二十三)——解释器模式 (原创内容,转载请注明来源,谢谢) 一、概述 解释器模式(interpreter)是给定一个语言,定义它的文法的一种表示...

    用户1327360
  • 《JavaScript 模式》读书笔记(5)— 对象创建模式4

    JavaScript中没有常量的概念,虽然许多现代的编程环境可能为您提供了用以创建常量的const语句。作为一种变通方案,JavaScript中常见的一种方法...

    zaking
  • react的事件处理为什么要bind this 改变this的指向?

    这句话大概意思就是,你要小心jax回调函数里面的this,class方法默认是不会绑定它的

    Tz一号
  • 【TS】358- 浅析 TypeScript 设计模式

    设计模式就是软件开发过程中形成的套路,就如同你在玩lol中的“正方形打野”,“四一分推”,又或者篮球运动中的“二夹一”,“高位单打”一样,属于经验的总结。

    pingan8787
  • RocketMQ存储--主从同步【源码笔记】

    1.消息存储在Master上了,如何同步到Slave上了呢? 2.同步复制和异步复制流程是怎么样的?

    瓜农老梁
  • 再也不用被this苦恼了

    前端编程对于this再熟悉不过了,今日来个老调重弹温故知新,肯定有很多大佬已经完全吃透了this原理,敬请出门左拐。对于理解this似懂非懂的同学可以借鉴一波

    Jack Chen

扫码关注云+社区

领取腾讯云代金券