如何使用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'？

回答

相關問題