Soy bastante nuevo en React y después de seguir algunos tutoriales, estaba probando el siguiente código mío.
Hice un componente, le pasé accesorios de una tienda, en componentWillMount creo un nuevo estado para el componente. La representación está bien hasta ahora.
A continuación, vinculé mi state al valor de un cuadro de entrada y también tengo onChange listener. Aún así, no puedo cambiar mis valores en el campo.
Dado que soy de fondo Angular, asumo que el valor de la entrada vinculante al estado como se muestra a continuación actualizará automáticamente el name de la propiedad en el objeto de state . ¿Estoy equivocado aquí?
componentWillMount(){ this.setState({ updatable : false, name : this.props.name, status : this.props.status }); } //relevant DOM from component's render function <input className="form-control" type="text" value={this.state.name} id={'todoName' + this.props.id} onChange={this.onTodoChange.bind(this)}/> onTodoChange(){ console.log(this); //consoling 'this' here, shows old values only. //not sure how and even if I need to update state here. // Do I need to pass new state to this function from DOM //TODO: send new data to store } Mi función onTodoChange consola el valor de this que tiene el mismo valor de estado que durante la inicialización. ¿Cómo hago para cambiar el estado escribiendo en los cuadros de entrada, para poder enviarlos a las tiendas?
A diferencia del caso de Angular, en React.js necesitas actualizar el estado manualmente. Puedes hacer algo como esto:
<input id={'todoName' + this.props.id} className="form-control" type="text" value={this.state.name} onChange={e => this.onTodoChange(e.target.value)} />Y luego en la función:
onTodoChange(value){ this.setState({ name: value }); }Además, puede establecer el estado inicial en el constructor del componente:
constructor (props) { super(props); this.state = { updatable: false, name: props.name, status: props.status }; }Puede hacer un atajo a través de la función en línea si simplemente desea cambiar la variable de estado sin declarar una nueva función en la parte superior:
<input type="text" onChange={e => this.setState({ text: e.target.value })}/>Creo que es la mejor manera para ti.
Debe agregar esto: this.onTodoChange = this.onTodoChange.bind(this) .
Y su función tiene event param(e) y obtiene valor:
componentWillMount(){ this.setState({ updatable : false, name : this.props.name, status : this.props.status }); this.onTodoChange = this.onTodoChange.bind(this) } <input className="form-control" type="text" value={this.state.name} id={'todoName' + this.props.id} onChange={this.onTodoChange}/> onTodoChange(e){ const {name, value} = e.target; this.setState({[name]: value}); }