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

Question

我正在学习ReactJS和Redux，我无法弄清楚如何在将onChange回调绑定到this访问我的TextField实例。

（我在这个例子中使用了材料-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访问其值来使用我觉得难看的解决方案（不可重用=>不是非常'组件友好document.getElementById('myField').value

我怎么能摆脱这个id ，并在我的回调中使用textFieldRef.value东西来访问它？

我试过没有.bind(this) ，它允许我通过this访问我的TextField实例，但我不能再访问我的this.props.setDataValue()函数，因为this没有绑定到我的类上下文。

谢谢 ！

Answer 1

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

但是，在这种情况下，您实际上并不需要引用。 在TextField上放置ref（或ID）不一定有效。 您引用的是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 。

Answer 2

使用状态和Redux是一种糟糕的风格。 所以这是代码的设计问题。

Redux旨在与功能组件一起使用，而不是类型组件。

我建议使用功能组件并将syntetic事件作为参数传递给onChange函数，如下所示：

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

然后在元素中使用这样的东西：

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

您还可以传递元素自己的属性：

const mapDispatchToProps = (dispatch) => {