1

参照を使用してボタンをクリックして入力フィールドにアクセスしようとしています。私が書いた構文は 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;
4

2 に答える 2

0

ユーザーがクリックすると、このコンテキストが失われるためです。代わりにこれを試してください：

<button className="btn btn-info" type="button" onClick={this.shortenURL.bind(this)}>Shorten</button>
于 2016-01-20T09:26:32.843 に答える