Reactjs 反应0.14-通过findDOMNode使用参考

我正在尝试使用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;

“使用严格的”
从“React”导入React
从“react dom”导入react dom
类Dashboard扩展了React.Component{
componentDidMount（）{
log（“在组件中没有装载”，ReactDOM.findDOMNode（this.refs.Url））
}
shortenURL（）{
console.log（“在函数中”，ReactDOM.findDOMNode（this.refs.Url））//给出错误：未捕获类型错误：无法读取null的属性“refs”
}
render（）{
返回(
缩短网址
在此处输入您的长URL
缩短
)
}
}
导出默认仪表板；

这是因为当用户单击时，您会丢失此操作的上下文。请尝试以下方法：

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

缩短

这是因为当用户单击时，您会丢失此操作的上下文。请尝试以下方法：

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

缩短

您可以在一篇文章中阅读有关此问题的更多信息。基本上，ES6方法不会自动绑定到

此

。您可以使用托马斯提到的

bind

，也可以使用简洁的Arrow函数-

---

onClick={（e）=>this.shortenURL（）}

你可以在一个网站上阅读更多关于这个问题的信息。基本上，ES6方法不会自动绑定到

此

。您可以使用托马斯提到的

bind

，也可以使用简洁的Arrow函数-

---

onClick={（e）=>this.shortenURL（）}

是的，明白了。非常感谢。“this.refs.Url”也可以在绑定后直接使用。但我想如果我们在React.createClass（）中工作，那么绑定是不必要的。是吗？不，createClass autobinds，不确定它是否会在React中永远存在。是的，明白了。非常感谢。“this.refs.Url”也可以在绑定后直接使用。但我想如果我们在React.createClass（）中工作，那么绑定是不必要的。是吗？不，是createClass autobinds，但不确定它是否会永远存在。