react入门（五）：事件处理、条件渲染、列表&keys、表单

柴小智

发布于 2020-02-13 16:48:48

1.1K0

发布于 2020-02-13 16:48:48

文章被收录于专栏：菜鸟计划

一、事件处理

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>
        )
    }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-01-14 ，如有侵权请联系 cloudcommunity@tencent.com 删除

react