CODEWITHSUNDEEP
javascriptreactjs
jsomers89
jsomers89

Reputation: 173

Get text from textbox react js

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:

Upvotes: 3

Views: 9897

Answers (2)

Mayank Shukla
Mayank Shukla

Reputation: 104379

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/

Upvotes: 3

noj
noj

Reputation: 6759

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

Upvotes: 0

Related Questions