如何正确绑定 onChange 回调到 ReactJS、Redux 和 ES2015 的'this'？

Question

我正在学习ReactJS和Redux，我不知道如何在绑定TextField实例时访问我的TextField实例

，将其更改为this。

（我在这个例子中使用了 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的东西访问它？

我在没有.bind(this)的情况下尝试过，这使我可以通过this访问我的TextField实例，但是由于this没有绑定到我的类上下文，因此我无法再访问我的this.props.setDataValue()函数。

谢谢！

Answer 1

避免在 React 组件中使用像 document.getElementById 这样的调用。React 已经被设计为优化昂贵的 DOM 调用，所以你这样做是在对抗框架。如果你想知道如何在 React 中引用 DOM 节点，请阅读这里的文档。

但是，在这种情况下，您实际上并不需要引用。将 ref（或 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)}
/>

注意：使用值而不是默认值。

Answer 2

将状态与 Redux 一起使用是一种不好的风格。所以这是代码的设计问题。

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

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

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

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

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

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

const mapDispatchToProps = (dispatch) => {