ReactJS、Redux、およびES2015でonChangeコールバックを 'this'に正しくバインドする方法はありますか？

Question

私はReactJSとReduxを学んでいます。私は、そのコールバックをthisにバインドしている間にTextFieldインスタンスにアクセスする方法を理解できません。

（私はこの例ではmaterial-uiを使用していますが、私はそれなしで全く同じ問題が発生します）

import React, {Component} from 'react'; 
import { connect } from 'react-redux'; 
import { setDataValue } from './actions/data'; 
import TextField from 'material-ui/lib/text-field'; 
import Paper from 'material-ui/lib/paper'; 

export class DataInput extends Component { 
    constructor(props){ 
     super(props); 
    } 

    handleTextChange() { 
     this.props.setDataValue(document.getElementById('myField').value); 
    } 

    render(){ 
     return (
      <Paper style={{ 
       width: '300px', 
       margin: '10px', 
       padding: '10px' 
      }}> 
       <TextField 
        id='myField' 
        defaultValue={this.props.data.value} 
        onChange={this.handleTextChange.bind(this)} /> 
      </Paper> 
     ); 
    } 
} 

export default connect(
    (state) => ({data: state.data}), 
    {setDataValue} 
)(DataInput); 

私は '=>非常ない再利用できません（醜い見つけるソリューションを使用しています私のTextFieldにidを設定することにより、コンポーネントに優しい '）、およびdocument.getElementById('myField').value

と、その値にアクセスするにはどうすればこのidを取り除く、そして私のコールバックの内側textFieldRef.valueようなもので、それをアクセスし得るだろうか？

私は私にthisを通して私のTextFieldインスタンスへのアクセスを与える、.bind(this)なしで試したが、thisは私のクラスのコンテキストにバインドされていないので、私はもはや私のthis.props.setDataValue()機能にアクセスすることができます。

ありがとうございました！

Answer 1

Reactコンポーネント内でdocument.getElementByIdのようなコールを使用しないでください。 Reactは既に高価なDOM呼び出しを最適化するように設計されているため、これを行うことでフレームワークに取り組んでいます。 ReactのDOMノードの参照方法を知りたければ、hereというドキュメントを読んでください。

しかし、このような状況では、実際には参照は必要ありません。 TextFieldにref（またはID）を配置することは必ずしも機能しません。あなたが参照しているのはReact要素であり、DOMノードではありません。

代わりに、onChangeコールバックをよく使用してください。 onChangeに渡された関数は、event引数で呼び出されます。その引数を使用して入力値を取得できます。 （リアクトのevent systemを参照してください。）

をあなたのイベントハンドラは次のようになります。

handleTextChange(event) { 
    this.props.setDataValue(event.target.value); 
} 

そして、あなたのTextFieldは次のようになります。

<TextField 
    value={this.props.data.value} 
    onChange={event => this.handleTextChange(event)} 
/> 

注：Use value NOT defaultValue。

Answer 2

Reduxと一緒に状態を使用するのは悪いスタイルです。これはコードの設計上の問題です。

Reduxは、クラススタイルのものではなく、機能コンポーネントとともに使用することを意図していました。

私は、機能性成分を使用することをお勧めし、このようなのonChange関数へのパラメータとしてsynteticイベントを渡します。

<input onChange={ (e) => onChange(e.target.value)} 

あなたも渡すことができます：要素内にこのようなものを使用し、その後

const mapDispatchToProps = (dispatch) => { 
return { 
    onChange: (value) => { 
     dispatch(changeAction(value)) 
    } 
} 

と要素の所有物：

const mapDispatchToProps = (dispatch) => {