CODEWITHSUNDEEP
reactjsreactstrap
Punisher
Punisher

Reputation: 684

Set value of Reactstrap's Input to empty string

How do I set the value of a Reactstrap Input to be empty? I am using code like this.

handleChange = (event) => {
    this.setState({message: event.target.value});
};

< Input onChange = {this.handleChange}/>

Also, what is the best practice for getting the value of an input: refs or onChange?

Upvotes: 1

Views: 1497

Answers (2)

Vahid Al
Vahid Al

Reputation: 1611

You gotta set a value property for your input which holds the value of your input, so your input looks like this:

<Input value={this.state.message} onChange={this.handleChange} />

and then when you want to clear its value, you just do this:

this.setState({message: ''})

and for your other question, the answer is that the Refs provide a way to access DOM nodes or React elements created in the render method, according to React documentation You can use Refs when:

  • Managing focus, text selection, or media playback.
  • Triggering imperative animations.
  • Integrating with third-party DOM libraries.

and you have to AVOID using refs for anything that can be done declaratively. Then, here we just use onChange because we don't simply need Refs!

Upvotes: 1

zilijonas
zilijonas

Reputation: 3785

You need to assign state value to your input field.

public class myApp() extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            message: ''
        };
    }

    handleChange = (event) => {
        this.setState({message: event.target.value});
    };

    render() {
        return (
            <Input value={this.state.message} onChange={this.handleChange} />
        );
    }
}

Upvotes: 0

Related Questions