Question

因此，我从Material UI中获得了TextField组件，如下所示：

<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"
        />

，当我按ctrl + enter时，我想调用addHandler方法（在to-do字段中添加输入值），但这东西不起作用。目前，我通过按下按钮来调用addHandler方法，并且效果很好。好像是onKeyPress的方法调用有误，因为我在控制台中收到以下消息：期望赋值或函数调用，而是看到了表达式no-unused-expressions

你能告诉我这是怎么回事吗？

Answer 1

您应该像这样调用函数

   this.props.addHandler() // with the brackets

所以现在代码看起来像

      <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"
    />

如何正确设置Material UI文本字段的onKeyPress事件？

1 个答案: