Question

我正在处理包含一种标记输入的表单。如果用户输入标签并点击输入，则会将标签添加到某个阵列。但是，当我点击输入时，它也会提交表格。当然，我可以添加e.preventDefault()技巧，但是再次，它仍会运行JavaScript代码，这是我在尝试输入标签时不想要的。

所以我尝试添加一个if语句来注意，如果密钥是等于输入的，但是表单没有得到通知我点击了哪个按钮。

所以这个函数会运行如果我在表单上按Enter键。

handleForm(e) {
    e.preventDefault();

    // Not working..
    if(e.keyCode === 32) {
        alert('Enter..') // prevent submitting further here or something
    } else {
        let state = { ...this.state.product }

        if (state.name == '' || state.price == 0 || state.ingredients.length <= 0) {
            alert('Naam, prijs en ingredienten zijn verplicht');
        } else {

            console.log(state);

        }
    }

}

如何完全阻止用于提交的回车键？我如何使用该密钥代码，例如表单或其他东西？我已经尝试添加一个事件监听器，但是当我点击另一个按钮而不是回车时它会提交。

对于上下文，我的标记输入函数是从keyup事件中触发的。

handleKeyPress(e) {

    // if the event key == enter key (is working..)
    if (e.keyCode === 32) {

        // Check if there is a ingredient supplied
        if(this.state.tag == '') {
            alert('Vul een ingredient in')
        } else {

            // Get the value of the ingredient input
            let tag = this.state.tag;

            // Copy state of just the ingredients (not the product)
            let ingredients = [...this.state.product.ingredients];

            // Create an array including only the names of the ingredients
            let names = ingredients.map((item) => {
                return item.name;
            });

            // Check if the array already includes the ingredient
            if (names.includes(this.state.tag)) {
                // Alert if the ingredient already exists
                alert('Deze ingredient is al toegevoegd');
            } else {

                // Set the ingredient with value
                let ingredient = { name: tag, value: 1 };

                // Push the ingredient to the ingredients array of product
                ingredients.push(ingredient);

                // Get the product state
                let product = this.state.product;

                // set the ingredients of the product object with new ingredient
                product.ingredients = ingredients;

                // Change and set the state of proudct and empty out the tag input (ingredient)
                this.setState({ product: product }, () => {
                    this.setState({ tag: '' });
                });

            }

        }

    }

}

Answer 1

当您使用表单时，它会在您按Enter键时始终触发onSubmit事件，因此假设您要使用＆＃34;请输入＆＃34;要继续添加标记，您可以在提交功能中添加添加标记代码，并添加一个带有type="button"的按钮（因此按钮不会在点击时提交），以便在完成表单并使用其{{1}时} event来完成表单。

示例：

onClick

React form onSubmit没有注意到Enter按钮

1 个答案: