P18:React高级

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/197346.html

1. 代替原来的 e.target.value
2. ref使用中的坑
3. 总结

在编写组件中的方法时，经常会遇到语义化很模糊的代码，这对于团队开发是一个很大的问题。因为 review 代码或者合作时都会影响开发效率。或者到这核心成员离开，项目倒闭的严重影响。所以我们必须重视 react 代码当中的语义化。ref是个不错的工具，快来学习一下吧。

代替原来的 e.target.value

以前的案例中，我们写了下面的代码，使用了e.target，这并不直观，也不好看。这种情况我们可以使用ref来进行解决。

inputChange(e){
    this.setState({
        inputValue:e.target.value
    })
}

如果要使用ref来进行，需要先在JSX中进行绑定， 绑定时最好使用 ES6 语法中的箭头函数，这样可以简洁明了的绑定 DOM 元素。

<input 
    id="mybj" 
    className="input" 
    value={this.state.inputValue} 
    onChange={this.inputChange.bind(this)}
    //关键代码——----------start
    ref={(input)=>{this.input=input}}
    //关键代码------------end
    />

绑定后可以把上边的类改写成如下代码:

inputChange(){
    this.setState({
        inputValue:this.input.value
    })
}

这就使我们的代码变得语义化和优雅的多。但是就我个人的经验来讲，我是不建议用ref这样操作的，因为React的是数据驱动的，所以用 ref 会出现各种问题。

ref使用中的坑

比如现在我们要用 ref 绑定取得要服务的数量，可以先用ref进行绑定。

<ul ref={(ul)=>{this.ul=ul}}>
    {
        this.state.list.map((item,index)=>{
            return (
                <MeinvItem 
                key={index+item}  
                content={item}
                index={index}
                deleteItem={this.deleteItem.bind(this)}
                />
            )
        })
    }
</ul>

绑定后可以在addList()方法中，获取当前<li>的值.

ddList(){
    this.setState({
        list:[...this.state.list,this.state.inputValue],
        inputValue:''
    })
    //关键代码--------------start
    console.log(this.ul.querySelectorAll('li').length)
    //关键代码--------------end
}

这时候你打开控制台，点击添加服务按钮，你会发现数量怎么少一个？（就是这个坑）如下图，

总结

本文主要学习了ref的用法和ref中的坑。学完后练习一下吧，代码这东西，不练习你是学不会的。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/