How can i clear my input when i'm submit my event (reactJs app)

Question

I have 3 inputs whose value I save and click on my btn, I would like to clear these inputs.......

my function that saves the value of one of my inputs:

onChangeIdentity = (event) => {
this.newPlayer = Object.assign({}, this.newPlayer, { strPlayer: 
event.target.value})
 }

my input:

<Input style={{width:'30%'}} onChange={ this.onChangeIdentity } 
 ref='myFormRef' value={ this.newPlayer.strPlayer } type='text' 
 placeholder='Nom & Prenom'/>

and the function that must clear my input:

addPlayer = () => {
  console.log('my new Player: ' , this.newPlayer);
  this.setState({
   teamPlayers: [...this.state.teamPlayers, this.newPlayer]
 })

this.refs.myFormRef.value = ""
 }

I tried several ways to declare my refs but nothing works..... any ideas?

When you say "clear my input," do you mean the UI surface in the browser, or do you mean something else? — Robert Harvey
– Robert Harvey, Commented Jan 20, 2019 at 17:35

Scarysize · Accepted Answer · 2019-01-20 17:47:00Z

1

You input's values are driven by the state of the component value={this.newPlayer.strPlayer}. If you want to clear the input's value you need to clear the state which maps to it, for example:

this.setState({newPlayer: {strPlayer: ''}});

After setting the state, the component updates automatically and renders the input as empty.

Here is a full example component:

class MyComponent extends Component {
  state = {
    inputValue: ""
  };

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.inputValue}
          onChange={event => this.setState({ inputValue: event.target.value })}
        />
        <button
          onClick={() => {
            /* submit this.state.inputValue */
            this.setState({ inputValue: "" }); // reset input value
          }}
        >
          submit
        </button>
      </div>
    );
  }
}

answered Jan 20, 2019 at 17:47

Scarysize

4,31130 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

E.D Over a year ago

great, that was it ;)

Collectives™ on Stack Overflow

How can i clear my input when i'm submit my event (reactJs app)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related