小编Rom*_*and的帖子

我正在学习ReactJS和终极版,我无法弄清楚如何获得访问我的文本字段实例,同时结合它的onChange回调this.

(我在这个例子中使用了材料-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 …