Reputation: 135
So I have TextField component from Material UI like this:
<TextField
id="todo-textarea"
label="Enter new todo"
placeholder="ToDo"
onChange={this.props.toDoOnChange}
onKeyPress={(ev) => {
if (ev.ctrlKey && ev.key === 'Enter') {
this.props.addHandler
}
}}
value={this.props.toDoValue}
className={classes.textField}
margin="normal"
helperText="Press Ctrl+Enter to add new ToDo"
/>
and I want to call addHandler method (which add input value in to-do field) when I press ctrl+enter, but this stuff is not working. Currently I call addHandler method by pressing a button, and it works good. Look's like smth wrong with method call from onKeyPress, because I have this message in console: Expected an assignment or function call and instead saw an expression no-unused-expressions
Can you tell me what is wrong here ?
Upvotes: 1
Views: 7149
Reputation: 137
you should call function like this
this.props.addHandler() // with the brackets
so now the code looks like
<TextField
id="todo-textarea"
label="Enter new todo"
placeholder="ToDo"
onChange={this.props.toDoOnChange}
onKeyPress={(ev) => {
if (ev.ctrlKey && ev.key === 'Enter') {
this.props.addHandler() // here was the mistake
}
}}
value={this.props.toDoValue}
className={classes.textField}
margin="normal"
helperText="Press Ctrl+Enter to add new ToDo"
/>
Upvotes: 2