react--获取元素 && setState同步更新

最新推荐文章于 2025-01-15 16:11:05 发布

原创最新推荐文章于 2025-01-15 16:11:05 发布 · 471 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在React中通过refs属性获取DOM元素，并演示了如何使用setState方法同步更新组件的状态，包括如何通过回调函数确保状态更新后的操作执行。

1、获取元素

import React,{Component} from 'react'
export default class UserAdd extends Component{
    constructor(){
        super();
    }
    handleSubmit=()=>{
        let name=this.refs.name.value;//获取定义好的ref
        console.log(name);
    }
    render(){
        return(
            <form onSubmit={this.handleSubmit}>
                <div className="from-group">
                    <label htmlFor="name">姓名</label>
                    <input type="text" className="form-control" ref="name"/>//先给要获取的dom定义一个ref
                </div>
                <div className="from-group">
                    <input type="submit" className="btn btn-primary"/>
                </div>
            </form>
        )
    }

}

2、setState同步更新

setState函数的第二个参数允许传入回调函数，在状态更新完毕后进行调用

this.setState({
      load: !this.state.load,
      count: this.state.count + 1
    }, () => {
      console.log(this.state.count);
      console.log('加载完成')
    });