I am attempting to get the input out of a textbox using ReactJS but am not sure how
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>
)
}
}
The text from the textbox should be added onto the message is:
You need two state variables, one will store the current value of textfield, and another one will store the complete value, and inside increment method append the textfield value to complete value and set it to '' again, Try this:
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>
);
}
}
Check the jsfiddle for working example: https://jsfiddle.net/hse607rr/
You need to add the handleChange method:
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>
);
}
}