一、通过内敛样式函数的方式获取dom。此种方式在每次更新数据的时候都需要先将c元素置为null,所以需要 渲染两次。但是不会影响页面的展示。
class Demo extends React.Component {
showInfo = () => {
console.log(this.input1);
};
render() {
return (
<div>
{/*通过内联样式获取dom元素*/}
<input ref={(c) => (this.input1 = c)} type="text"></input>
<button onClick={this.showInfo}>点我提示输入数据</button>
</div>
);
}
}
//2.渲染组件到页面
ReactDOM.render(<Demo />, document.getElementById("test"));
}
二、通过函数回调的方式绑定的方式获取dom节点元素,
class Demo extends React.Component {
state = { isHot: true };
showInfo = () => {
console.log(this.input1);
};
changeWeather = () => {
const { isHot } = this.state;
this.setState({ isHot: !isHot });
};
saveInput = (c) => {
this.input1 = c;
console.log(c);
};
render() {
const { isHot } = this.state;
return (
<div>
{/*通过回调函数的方式获取dom元素*/}
<h2>今天很{isHot ? "炎热" : "凉爽"}</h2>
<input ref={this.saveInput} type="text"></input>
<button onClick={this.showInfo}>点我提示输入数据</button>
<button onClick={this.changeWeather}>点我改变天气颜色</button>
</div>
);
}
}
三、通过react组件中的createRef创建一个容器,将获取的dom节点数据放入容器中
class Demo extends React.Component {
myref = React.createRef();
showInfo = () => {
alert(this.myref.current.value);
};
render() {
return (
<div>
{/*通过createRef获取dom元素*/}
<input ref={this.myref} type="text"></input>
<button onClick={this.showInfo}>点我提示输入数据</button>
</div>
);
}
}