react通过ref获取dom节点信息

一、通过内敛样式函数的方式获取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>
          );
        }
      }