专栏首页菜鸟计划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 条评论
登录 后参与评论

相关文章

  • 02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定

    如果想注册局部指令,组件中接受一个directives的选项,位于vue实例参数里面,局部指令只能在本组件使用

    常见_youmen
  • Vue基础:条件渲染、列表渲染、事件处理

    那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素,<input> 不会被替换掉——仅仅是替换了它的 pla...

    奋飛
  • Vue基础:条件渲染、列表渲染、事件处理

    那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素, 不会被替换掉——仅仅是替换了它的 placeholde...

    奋飛
  • 前端MVC Vue2学习总结(四)——条件渲染、列表渲染、事件处理器

    一、条件渲染 1.1、v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if...

    张果
  • 03Vue.js快速入门-Vue列表渲染及条件渲染实战

    有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作。最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据。如果有数据就显示表格数据。 Vue...

    老马
  • 重谈react优势——react技术栈回顾

    现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文。

    周陆军
  • 03-Vue入门系列之Vue列表渲染及条件渲染实战

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作。最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据。如果有数据就显...

    老马
  • React面试题精选

    实际上, 想要去了解某人对React的理解程度,仅凭这些面试题或许远远不够。 react面试题 这篇文章更应该取名为关于react你不是非知不可的东西,但如果了...

    疯狂的技术宅
  • React 概要

    React 简介 React 是一个开源的javascript库,用来构建用户接口(UI)。下图是React的一些基本信息: ? React 的特点 单向数据流...

    用户1214695
  • React学习(3)——列表、键值与表单 原

        例子中使用map方法将每个元素的值*2,最后得到的数组为:[2, 4, 6, 8, 10]。在React中,处理组件数组的方式与之类似。

    随风溜达的向日葵
  • react中key的正确使用方式

    在开发react程序时我们经常会遇到这样的警告,然后就会想到:哦!循环子组件忘记加key了~

    ConardLi
  • React 列表、键值与表单

    例子中使用map方法将每个元素的值*2,最后得到的数组为:[2, 4, 6, 8, 10]。在React中,处理组件数组的方式与之类似。

    随风溜达的向日葵
  • React 状态、事件与动态渲染

    例子中使用map方法将每个元素的值*2,最后得到的数组为:[2, 4, 6, 8, 10]。在React中,处理组件数组的方式与之类似。

    随风溜达的向日葵
  • React(三)

    props 其实就是属性 Properties 的缩写。 在形式上,props 之于 JSX 就相当于 attributes 之于 HTML。从写法上来看呢,我...

    用户2491317
  • 玩转react-hooks,自定义hooks设计模式及其实战

    自从react16.8,react-hooks诞生以来,在工作中一直使用hooks,一年多的时间里,接触的react项目,渐渐使用function无状态组件代替...

    用户6835371
  • 「react进阶」年终送给react开发者的八条优化建议

    笔者是一个 react 重度爱好者,在工作之余,也看了不少的 react 文章, 写了很多 react 项目 ,接下来笔者讨论一下 React 性能优化的主要方...

    用户6835371
  • 「React Hook」160行代码实现动态炫酷的可视化图表 - 排行榜

    这是一个国外大佬在其公司峰会的代码竞赛中写的一个库:react-dynamic-charts,用于根据动态数据创建动态图表可视化。

    前端劝退师
  • react学习

    JSX是一个JavaScript的语法扩展。因为JSX在语法上更简洁JavaScript而不是HTML,所以React DOM使用cameCase来定义属性的名...

    Cloud-Cloudys
  • 「React Hook」160行代码实现动态炫酷的可视化图表 - 排行榜

    这是一个国外大佬在其公司峰会的代码竞赛中写的一个库:react-dynamic-charts,用于根据动态数据创建动态图表可视化。

    Nealyang

扫码关注云+社区

领取腾讯云代金券