javascript - form - react router

¿Cómo enlazar correctamente onChange callback a ''this'' con ReactJS, Redux y ES2015?

Question

Estoy aprendiendo ReactJS y Redux, y no puedo encontrar la manera de acceder a mi instancia de TextField mientras enlazo la función de devolución de llamada a this .

(Estoy usando material-ui para este ejemplo, pero me encontraría con el mismo problema sin él)

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);

Estoy usando una solución que me parece fea (no reutilizable => no muy "amigable con los componentes") estableciendo un id en mi campo de texto y accediendo a su valor con document.getElementById(''myField'').value

¿Cómo podría deshacerme de esta id y acceder a ella con algo como textFieldRef.value dentro de mi devolución de llamada?

Intenté sin .bind(this) , que me da acceso a mi instancia de TextField a través de this , pero ya no puedo acceder a mi función this.props.setDataValue() ya que no está vinculada a mi contexto de clase.

Gracias !

Answer 1

Usar el estado junto con Redux es un mal estilo. Entonces este es un problema de diseño del código.

Redux estaba destinado a ser utilizado junto con componentes funcionales y no de estilo de clase.

Sugiero usar el componente funcional y pasar el evento sintético como un parámetro a la función onChange como esta:

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

y luego usa algo como esto dentro del elemento:

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

También puede pasar elementos de propiedades propias:

const mapDispatchToProps = (dispatch) => {

Answer 2

Evite utilizar llamadas como document.getElementById dentro de un componente Reaccionar. React ya está diseñado para optimizar costosas llamadas DOM, por lo que estás trabajando contra el marco de trabajo haciendo esto. Si desea saber cómo los nodos DOM de referencia en React, lea los documentos aquí .

Sin embargo, en esta situación no necesita referencias. Colocar un ref (o una ID) en TextField no necesariamente va a funcionar. Lo que estás haciendo referencia es un elemento Reaccionar, no un nodo DOM.

En cambio, haga un mejor uso de la onChange llamada onChange . La función que se pasa a onChange se llama con un argumento de event . Puede usar ese argumento para obtener el valor de entrada. (ver el sistema de eventos de React)

Su controlador de eventos debería verse así:

handleTextChange(event) {
    this.props.setDataValue(event.target.value);
}

Y su TextField debería verse así:

<TextField 
    value={this.props.data.value}
    onChange={event => this.handleTextChange(event)}
/>

Nota: Use value NOT defaultValue .