前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react入门(五):事件处理、条件渲染、列表&keys、表单

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

作者头像
柴小智
发布2020-02-13 16:48:48
1.1K0
发布2020-02-13 16:48:48
举报
文章被收录于专栏:菜鸟计划

一、事件处理

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

直接看代码

代码语言:javascript
复制
两种方式绑定事件并传参数

第一种:

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>

二、条件渲染

直接看代码

代码语言:javascript
复制
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

直接看代码

代码语言:javascript
复制
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节点进行不必要的重建,使得性能下降并丢失子组件的状态。

四、表单

直接看代码

代码语言:javascript
复制
//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>
        )
    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-01-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、事件处理
  • 二、条件渲染
  • 三、列表与keys
  • 四、表单
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档