Get text from textbox react js

Question

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:

Ok I am not sure where to put the handleChange: function (evt) { this.setState({ textVal: evt.target.value.substr(0, 100) }); — jsomers89
– jsomers89, Commented Jan 30, 2017 at 17:07
You should then delete the question and create more specific one. By the way, your current question is incomplete, it ends with a colon. — revelt
– revelt, Commented Jan 31, 2017 at 11:54

Mayank Shukla · Accepted Answer · 2017-07-10 06:31:16Z

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/

noj · Accepted Answer · 2017-01-30 17:19:41Z

0

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

answered Jan 30, 2017 at 17:19

noj

6,7791 gold badge27 silver badges30 bronze badges

2 Comments

jsomers89 Over a year ago

That works so far I want the message to only update when the user clicks the add word button. It should store what was in the box at the time of the button click and allow the user to add onto what was previously entered

noj Over a year ago

Ah, in that case in handleChange store the value to a different state property then append that to word in increment

Collectives™ on Stack Overflow

Get text from textbox react js

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related