我有两个使用的示例ref callback attribute。首先是对回调函数的引用。第二个有一个箭头函数声明为该值。

第一个按预期工作。但是，第二个null在连续渲染中记录a 。

这是什么原因呢？

开始在输入框中输入内容

示例1（工作正常）

class App extends React.Component{

  constructor(props){

    super(props)

    this.refCallback = this.refCallback.bind(this)

    this.state = {}

  }



  refCallback(el){

    console.log(el)

  }



  render(){

    return <input type="text"

      value={this.state.value}

      ref={this.refCallback}

      onChange={(e) => this.setState({value: e.target.value})}

      />

  }

}



ReactDOM.render(<App/>, document.getElementById('app'))


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

示例2（这不起作用）

class App extends React.Component{

  constructor(props){

    super(props)

    this.state = {}

  }



  render(){

    return <input type="text"

      value={this.state.value}

      ref={(el) => console.log(el)}

      onChange={(e) => this.setState({value: e.target.value})}

      />

  }

}



ReactDOM.render(<App/>, document.getElementById('app'))


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>