如何使用ReactJS,Redux和ES2015正确绑定onChange回调到'this'？

Question

我正在学习ReactJS和终极版,我无法弄清楚如何获得访问我的文本字段实例,同时结合它的onChange回调this.

(我在这个例子中使用了材料-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);

我使用的是一个解决方案,我觉得丑(不能重复使用=>不是很"组件友好")通过设置id在我的文本字段,以及访问其值document.getElementById('myField').value

我怎么能摆脱这个id,并textFieldRef.value在我的回调内部访问它？

我试过没有.bind(this),这让我可以访问我的TextField实例this,但我不能再访问我的this.props.setDataValue()函数,因为this它没有绑定到我的类上下文.

谢谢 !

Answer 1

避免document.getElementById在React组件中使用调用.React已经设计用于优化昂贵的DOM调用,因此您通过执行此操作来对抗框架.如果您想知道React中如何引用DOM节点,请在此处阅读文档.

但是,在这种情况下,您实际上并不需要引用.放置引用(或ID)TextField不一定有效.您引用的是React元素,而不是DOM节点.

相反,更好地利用onChange回调.传递给的函数onChange使用event参数调用.您可以使用该参数来获取输入值.(见React的事件系统.)

您的事件处理程序应如下所示:

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

你TextField应该看起来像这样:

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

注意:使用值NOT defaultValue.