直播网站源码，React中的三大实例之ref的三种形式

ref 有三种形式：

字符串形式

回调函数形式

CreateRef形式

如下示例代码展示了三种形式ref的创建于使用

<!DOCTYPE html><br><html><br><head><br>  <meta charset="UTF-8"><br>  <meta http-equiv="X-UA-Compatible" content="IE=edge"><br>  <meta name="viewport" content="width=device-width, initial-scale=1.0"><br>  <title>三种方式的ref</title><br></head><br><body><br>  <div id="test"></div><br>  <script src="../js/react.development.js"></script><br>  <script src="../js/react-dom.development.js"></script><br>  <script src="../js/babel.min.js"></script><br>  <script type="text/babel"><br>    // 创建组件<br>    class Demo extends React.Component {<br>      // 展示第一个输入框的内容<br>      showData1 = () => {<br>        const { input1 } = this.refs<br>        alert(input1.value)<br>      }<br>      // 展示第二个输入框的内容<br>      showData2 = () => {<br>        const { input2 } = this<br>        alert(input2.value)<br>      }<br>      /*<br>        React.createRef() 调用后可以返回一个容器，该容器<br>        可以存储被ref所标识的结点，但是该节点是专人专用只能存放一个标签<br>      */<br>      myRef = React.createRef()<br>      // 展示第三个输入框的内容<br>      showData3 = () => {<br>        alert(this.myRef.current.value)<br>      }<br>      render() {<br>        return (<br>          <div><br>            {/* 1.字符串形式的ref */}<br>            <input ref="input1" type="text" placeholder="点击按钮提示数据" /><br>            <button onClick={this.showData1}>点我提示第一个输入框中的内容</button><br /><br /><br>            {/* 2.回调函数形式的ref */}<br>            <input ref={(c) => { this.input2 = c }} type="text" placeholder="点击按钮提示数据" /><br>            <button onClick={this.showData2}>点我提示第二个输入框中的内容</button><br /><br /><br>            {/* 3.createRef的ref */}<br>            <input ref={this.myRef} type="text" placeholder="点击按钮提示数据" /><br>            <button onClick={this.showData3}>点我提示第三个输入框中的内容</button><br>          </div><br>        )<br>      }<br>    }<br>    // 渲染组件页面<br>    ReactDOM.render(<Demo />, document.getElementById('test'))<br>  </script><br></body><br></html>