Question

我正在尝试使用refs访问单击按钮上的输入字段。我编写的语法在ComponentDidMount中工作正常但在单击按钮时出现以下错误。未捕获的TypeError：无法读取null的属性'refs'。

"use strict"

import React from 'react'
import ReactDOM from 'react-dom'

class Dashboard extends React.Component {
    componentDidMount() {
        console.log("in component did mount", ReactDOM.findDOMNode(this.refs.Url))
    }
    shortenURL() {
        console.log("in function", ReactDOM.findDOMNode(this.refs.Url)) //Gives error: Uncaught TypeError: Cannot read property 'refs' of null
    }
    render() {
        return (
          <div className="container">
            <form>
          <div className="create-board">
            <div className="board-header">
              <h3 className="board-header-h3">URL Shortener</h3>
            </div>
            <div className="control-group txt-control">
                <div className="form-group">
                  <label className="control-label" htmlFor="inputURL">Enter your long URL here</label>
                  <input type="text" ref="Url" className="form-control" placeholder="Enter Your Long URL here"></input>
              </div>
              <div className="control-group but-control">
                <div className="controls">
                  <button className="btn  btn-info" type="button" onClick={this.shortenURL}>Shorten</button>
                </div>
              </div>
            </div>
          </div>
        </form>
          </div>
        )
    }
}
export default Dashboard;

Answer 1

这是因为当用户点击时你会丢失 this 的上下文。试试这个：

<button className="btn btn-info" type="button" onClick={this.shortenURL.bind(this)}>Shorten</button>

Answer 2

您可以在discussion on React Github中详细了解此问题。基本上ES6方法不会自动绑定到this。您可以使用托马斯提到的bind，也可以使用简洁的箭头功能 -

onClick={(e) => this.shortenURL()}

反应0.14 - 通过findDOMNode使用refs

2 个答案: