Estoy intentando sacar la entrada de un cuadro de texto usando ReactJS pero no estoy seguro de cómo
import React from 'react' class component extends React.Component { constructor() { super() this.state = { word: String('') } } increment() { this.setState({ word: this.state.word += '' }) } render() { return ( <div> <p>The message is: { this.state.word } </p> <input type="text" value={this.state.word} onChange={(event) =>this.handleChange(event.target.value)} /> <input type="submit" value="Add Word" onClick={() => this.increment()} /> {/*<p><input type="button" value="clear msg" onClick={() => this.eraseWord()} /></p>*/} </div> ) } }El texto del cuadro de texto debe agregarse al mensaje:
Necesita dos variables de state , una almacenará el valor actual del textfield de texto y otra almacenará el valor completo, y dentro del método increment textfield el valor del campo de texto al valor completo y lo establecerá en '' nuevamente, intente esto:
class HelloWidget extends React.Component { constructor() { super(); this.state = { word: '', new: '', }; } increment() { this.setState({ word: this.state.word + this.state.new, new: '', }) } handleChange(value) { this.setState({ new: value }); } render() { return ( <div> <p>The message is: { this.state.word } </p> <input type="text" value={this.state.new} onChange={(e) =>this.handleChange(e.target.value)} /> <input type="submit" value="Add Word" onClick={() => this.increment()} /> </div> ); } } Verifique el jsfiddle para ver el ejemplo de trabajo: https://jsfiddle.net/hse607rr/
Debe agregar el método handleChange :
class component extends React.Component { constructor() { super() this.state = { word: '' }; } increment() { this.setState({ word: this.state.word + '' }) } handleChange(value) { this.setState({ word: value }); } render() { return ( <div> <p>The message is: { this.state.word } </p> <input type="text" value={this.state.word} onChange={(event) =>this.handleChange(event.target.value)} /> <input type="submit" value="Add Word" onClick={() => this.increment()} /> {/*<p><input type="button" value="clear msg" onClick={() => this.eraseWord()} /></p>*/} </div> ); } }