可以通过refs来操作dom

字符串形式的refs

react不推荐使用该方式

<script type="text/babel">
    //创建组件
    class Demo extends React.Component {
        //展示左侧输入框的数据
        showData = () => {
            const {input1} = this.refs
            alert(input1.value)
        }
        //展示右侧输入框的数据
        showData2 = () => {
            const {input2} = this.refs
            alert(input2.value)
        }

        render() {
          return (
            <div>
              <input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
              <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
              <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示"/>
            </div>
            )
        }
    }

    //渲染组件到页面
    ReactDOM.render(<Demo a="1" b="2"/>, document.getElementById('test'))
</script>

注意：不建议使用字符串形式的refs。

image.png

回调函数形式的refs

<script type="text/babel">
    //创建组件
    class Demo extends React.Component {
        //展示左侧输入框的数据
        showData = () => {
            const {input1} = this
            alert(input1.value)
        }
        //展示右侧输入框的数据
        showData2 = () => {
            const {input2} = this
            alert(input2.value)
        }

        render() {
          return (
            <div>
              // 回调函数的参数就是当前ref所在的节点，在回调函数里将节点赋值给了变量input1
              <input ref={ el => this.input1 = el} type="text" placeholder="点击按钮提示数据"/>&nbsp;
              <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
              <input onBlur={this.showData2} ref={el => this.input2 = el} type="text" placeholder="失去焦点提示数据"/>&nbsp;
             </div>
            )
        }
    }

    //渲染组件到页面
    ReactDOM.render(<Demo a="1" b="2"/>, document.getElementById('test'))
</script>

image.png

开发中回调函数用上面的内联函数的方式即可

修改一下：

saveInput = (c) => {
  this.input1 = c;
  console.log('@', c);
}

render() {
   return (
      <div>
         {/*回调函数的参数就是当前ref所在的节点，在回调函数里将节点赋值给了变量input1*/}
         {/*<input ref={ el => this.input1 = el} type="text" placeholder="点击按钮提示数据"/>*/}
         <input ref={this.saveInput} type="text" placeholder="点击按钮提示数据" />&nbsp;
         <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
         <input onBlur={this.showData2} ref={el => this.input2 = el} type="text" placeholder="失去焦点提示数据"/>&nbsp;
      </div>
   )
}

注意：jsx中注释的方式：{/*...*/}。

通过createRef创建的refs

该方式是react最推荐使用的

<script type="text/babel">
    //创建组件
    class Demo extends React.Component {
        /* 
        React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
       */
        myRef = React.createRef()
        myRef2 = React.createRef()
        //展示左侧输入框的数据
        showData = () => {
          // 通过this.myRef.current来获取对应的节点
          alert(this.myRef.current.value);
        }
        //展示右侧输入框的数据
        showData2 = () => {
          alert(this.myRef2.current.value);
        }

        render() {
          return (
            <div>
              <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
              <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
              <input onBlur={this.showData2} ref={this.myRef2} type="text" />
            </div>
            )
        }
    }

    //渲染组件到页面
    ReactDOM.render(<Demo a="1" b="2"/>, document.getElementById('test'))
</script>