还是拿一个经典的react实例来说 可能都知道react中没有vue那样的数据双向绑定的效果
但我们可以通过其他的方式来实现

class App extends React.Component {
    constructor(){
		super();
		this.state={value:''}
	}
	render(){
		return (
			<div>
				<input type="text"  id="d1" ref="d2" onChange={this.change.bind(this)} />
                <div>{this.state.value}</div>
			</div>
		)
	}
	change(e){
		var div=document.getElementById('d1')//第一种方式: 通过原生的dom 操作获取对象
		this.setState({value:div.value})
		this.setState({value:this.refs.d2.value})//第二种方式: 通过 react 自己封装的refs 获取
		this.setState({value:e.target.value}) // 第三种方式 通过 事件对象 获取
	}
}
ReactDOM.render(<App />,document.getElementById('root'))

总结上面的三种情况就是
1.原生dom操作 ById ByClassName querySelector 等等
2.react 自带的 refs 方式 这个官方推荐使用 但不建议使用在事件源上面
3.事件对象 event 来使用 通常用于事件源 上面 上面的情况就推荐使用 这种方式

2021.5.31 来追更
当时那个时候 我还是主攻 vue 现在 在全职从事react开发 ，这下再来补充下吧
其实 refs 的那种方式 react官网也慢慢 不推荐使用了
推荐使用
hooks的 useRef() 或者 createRef()

state = {
	myRef = React.createRef()
}
//  hooks的方式

const myRef = useRef(null);


input ref = {myRef}  onChnage = { handleChange }

handleChange  = () => {
	console.log(myRef.currentEl......) // 忘记怎么写了 反正打印下 你就知道了
}

关注我 持续更新前端 知识