react-base-demos
/
15-Refs和DOM.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 注意: 先引入 react基础库,再引入react dom解析库 -->
  <script src="lib/react/react.development.js"></script>
  <script src="lib/react/react-dom.development.js"></script>
  <script src="lib/babel.min.js"></script>
</head>
<body>
  <!-- Ref -->
  <!-- 1. 通过React.createRef() 声明ref,关联DOM元素 -->
  <div id="root"></div>
  <script type="text/babel">
    // ref声明到其他组件
    class Demo extends React.Component {
      say(){
        console.log('demo say...');
      }
      render(){
        return (
          <div>这是demo</div>
        )
      }
    }
    class HelloWorld extends React.Component {
      constructor(props){
        super(props);
        //创建一个ref,创建完毕希望在其他地方可以被访问,所以赋值给实例对象
        this.inputRef = React.createRef();
        // 用于回调赋值
        this.inputRef2;
        // 创建一个ref 关联组件Demo
        this.demoRef = React.createRef();
        // bind
        this.handleSubmit = this.handleSubmit.bind(this);
        // 如果ref用回调形式关联,可以在构造函数直接使用当前ref对象
        this.setInputFocus = el =>{
          // el 本质上来讲 就是Dom元素本身
          // this.inputRef2 = el;
          // this.inputRef2.focus();
          el.focus();
        }
        // 直接打印ref? 这是不行的,注意声明周期函数顺序
        console.log('constructor.inputRef',this.inputRef);
      }
      // 挂载完毕后执行
      componentDidMount(){
        // 可以直接获取到 this.demoRef
        // 这里得到的是 demoRef的实例对象
        console.log('this.demoRef',this.demoRef);
        // 这样我们可以调用到另一个组件的方法
        this.demoRef.current.say();
        // 测试回调形式的ref声明
        console.log('this.inputRef2',this.inputRef2);
        // 使input输入框自动获取焦点
        // this.inputRef2.focus();
      }
      handleSubmit(e){
        // 阻止默认提交
        e.preventDefault();
        // 想要获取dom就可以通过 this.inputRef.current
        console.log('this.inputRef',this.inputRef);
        console.log('this.inputRef.current',this.inputRef.current);
        console.log('input.value',this.inputRef.current.value);
      }
      render(){
        return (
          <div>
            <Demo ref={this.demoRef}/>
            <form action="/abc" onSubmit={this.handleSubmit}>
              <input type="text" ref={this.inputRef}/><br/>
              {/*回调形式声明refs,接收一个函数,形参是元素本身*/}
              {/* <input type="text" ref={el => this.inputRef2 = el} /><br/>*/}
              <input type="text" ref={this.setInputFocus} /><br/>
              <input type="submit" value="提交"/>
            </form>
          </div>
        )
      }
    }
    // 使用react 相关api 渲染到容器
    ReactDOM.render(<HelloWorld />,document.getElementById('root'));
  </script>
</body>
</html>