1

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 …&lt;/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 にアクセスできることに気付きました。

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

4

1 に答える 1

1

笑！問題はbabelトランスレータにありました。.babelrc では、次のプリセットを使用しています。

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

これを次のように変更する必要がありました。

{
  "presets": ["react", "es2015", "stage-1"]
}
于 2016-11-21T17:40:04.597 に答える