反應0.14 - 通過findDOMNode使用引用

我想通過引用來訪問一個輸入字段的按鈕的點擊。我寫的語法在ComponentDidMount中正常工作，但單擊按鈕時會出現以下錯誤。未捕獲的TypeError：無法讀取null的屬性'refs'。反應0.14 - 通過findDOMNode使用引用

"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;

來源

2016-01-20 Nikita Jajodia

這是因爲你失去的上下文這當用戶點擊。試試這個：

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

來源

2016-01-20 09:26:32 Thomas

是的，我知道了。謝謝。「this.refs.Url」也可以在綁定後直接使用。 –

但我猜測綁定是沒有必要的，如果我們在裏面React.createClass（）工作。是嗎？ –

nope，createClass autobinds，不知道它是否會在React中永遠存在。 –

您可以在discussion on React Github中瞭解關於此問題的更多信息。基本上ES6方法不會自動綁定到this。您可以使用bind托馬斯提到的，或者你可以使用簡潔Arrow功能 -

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

來源

2016-01-20 09:37:32 hazardous

反應0.14 - 通過findDOMNode使用引用

回答

相關問題