javascript - 如何使用 ReactJS、Redux 和 ES2015 将 onChange 回调正确绑定(bind)到 'this'？

Question

我正在学习 ReactJS 和 Redux，但我不知道如何在将它的 onChange 回调绑定(bind)到 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 的东西访问它？

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

谢谢!

Answer 1

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

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

相反，更好地利用 onChange 回调。传递给 onChange 的函数使用 event 参数调用。您可以使用该参数来获取输入值。 (参见 React 的 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 .