CODEWITHSUNDEEP
javascriptreactjstypescriptantd
Sandra Willford
Sandra Willford

Reputation: 3789

React KeyboardEvent change input value after onPressEnter

I have an input that I need to reset the value with the method called by onPressEnter This is the input:

<Input
    type="text"
    placeholder="new account"
    onPressEnter={(event) => this.onCreateAccount(event)}>
</Input>

and this is the method called:

onCreatePitch(event: React.KeyboardEvent<HTMLInputElement>, accountId: number) {
    this.props.onCreatePitch(event.currentTarget.value, accountId);
    /* event.currentTarget.value = '';  can't do this, it's a read only value*/
}

as you can see event.currentTarget.value will not work as it's a read only value & event.target.value is not a valid type. Not sure what to do here thanks!

Upvotes: 0

Views: 5608

Answers (2)

Leffa
Leffa

Reputation: 504

Component

<Input
    type="text"
    placeholder="new account"
    onKeyDown={onCreateAccount}>
</Input>

Function

 const onCreateAccount = (event) => {
       if(event.key === 'Enter') {
       
       }
    }

Upvotes: -1

Shawn Yap
Shawn Yap

Reputation: 969

You could have a state that controls the value of the input

state = {
  value: ""
}

onEnterPress(event) {
 if (event is Enter) {
   this.setState({value: ""})
   return
 }
}

<Input
    type="text"
    placeholder="new account"
    value={this.state.value}
    onPressEnter={this.onEnterPressed} />

Upvotes: 1

Related Questions