this.refsは、Reactの空のオブジェクトです

Question

handleSubmit関数のthis.refsにアクセスしているときに問題が発生しています。

私のコンテナは、次のようになります。私は、送信ボタンをクリックすると

import React, { Component } from 'react' 
import { Link } from 'react-router' 
import { connect } from 'react-redux' 

import { getSomeStuff } from '../actions/someApiActions’ 


class MyClass extends Component { 
    componentWillMount() { 
    this.props.dispatch(getSomeStuffFromApi(this.props.params.cuid)) 
    } 

    handleSubmit =() => { 
    console.log(this.refs) // always console logs an empty object {} 
    } 

    render() { 
    if(!this.props.results.item){ 
     return (
     <div>... loading …</div> 
    ) 
    } 
    const { name } = this.props.results.item.stuff 
    return (
     <div> 
     <p><input ref="name" defaultValue={ name }/></p> 
     <button type="submit" onClick={this.handleSubmit}>Update</button> 
     </div> 
    ) 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    results: state.getSomeStuff 
    } 
} 

export default connect(mapStateToProps)(MyClass) 

、handleSubmitは常に（入力が正しくHTMLでレンダリングされていても）、空のオブジェクトをログに記録します。私は問題なしでcomponentDidUpdateメソッドのthis.refsにアクセスできることに気付きました。

なぜthis.refsにhandleSubmitでアクセスできないのですか？

Answer 1

LOL！問題はバベル翻訳者にありました。 .babelrcで私は、このプリセットを使用してきた。このフィドルに細かい作業を

{ 
    "presets": ["react", "es2015", "stage-1"] 
}