Question

我正在使用最新的Ember（3.2）。我已经扩展了 text-area 组件： app / components / enterable-textarea.js

export default TextArea.extend({
    keyPress(event) {
        if (event.keyCode === 13) {
            console.info('e ', event);
        }
      }
});

按下“ Enter”键后，我会在控制台中看到调试输出。

在我的路线模板中，我的表单很简单，例如：

    <form {{action "save" model.newNote on='submit'}}>
        <div class="form-group">
        <label for="tag">Tag</label>
        {{input type="text" value=model.newNote.tag 
placeholder="#anytag" class="form-control"}}
        </div>  

        <div class="form-group">
        <label for="note">Notepad</label>
        {{enterable-textarea value=model.newNote.note 
rows="6" class="form-control"}}
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>

我该如何将表单操作传递给组件或触发表单的“提交”事件？我需要通过按“ Enter”键将整个表单传递给route操作

Answer 1

您将动作作为属性传递，然后将其作为函数调用：

export default TextArea.extend({
    onEnter: () => {}, //or function() {},
    keyPress(event) {
        if (event.keyCode === 13) {
            this.get('onEnter')(); //or even this.onEnter();
        }
      }
});

{{enterable-textarea value=model.newNote.note 
    rows="6" class="form-control" onEnter=(action "save" model.newNote)}}

从自定义组件触发表单提交事件

1 个答案: