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

我在学习ReactJS和Redux，我无法弄清楚如何在绑定它的onChange回调到this时访问我的TextField实例。如何使用ReactJS，Redux和ES2015将onChange回调正确绑定到'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);

我使用的是一个解决方案，我觉得丑（不能重复使用=>不是很'组件友好'）通过我的文本字段设置的id，并访问与document.getElementById('myField').value

值我怎么能摆脱这种id的，并且用类似textFieldRef.value我的回调里面访问它？

我尝试没有.bind(this)，这给了我通过this访问我的TextField实例，但我不能再访问我的this.props.setDataValue()功能，因为this不绑定到我的课堂情境。

谢谢！

来源

2016-01-26 Romain Durand

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

但是，在这种情况下，您并不需要参考。在TextField上放置参考（或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。

来源

2016-01-27 00:22:51

谢谢你的快速答案！就是这样，这个事件，我怎么会想念那个？我非常了解使用document.getElementById在React中是一个非常糟糕的练习，但我找不到另一个解决方案，因此我的问题:) 我应该更仔细地阅读material-ui文档，再次感谢您。 –

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

Redux的目的是与功能组件一起使用，而不是类风格的组件。

我建议使用功能组件，并通过syntetic事件作为一个参数的onChange函数是这样的：

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

，然后使用类似这样的元素中：

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

您也可以通过元素自己的属性：

const mapDispatchToProps = (dispatch) => {

来源

2017-02-27 17:25:08

这一行不正确'Redux意味着与功能组件一起使用，而不是类风格的.'形成redux文档'如果当您需要添加本地状态，生命周期方法或性能优化时，您可以将它们转换到类。“ - http://redux.js.org/docs/basics/UsageWithReact.html – Amila

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

回答

相关问题