反應形式onSubmit不注意Enter按鈕

Question

我正在處理包含某種標簽輸入的表單。 如果用戶輸入標簽並點擊回車，它將把標簽添加到某個數組中。 但是，當我按Enter鍵時，它也會提交表單。 當然，我可以添加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);

        }
    }

}

如何完全阻止Enter鍵提交？ 我怎樣才能將鍵代碼用於表單或其他內容？ 我試圖添加一個事件偵聽器，但是沒有成功，因為當我按下Enter鍵以外的其他按鈕時它將提交。

對於上下文，我的標簽輸入功能是從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事件，因此，假設您要使用“輸入”來繼續添加標簽，則可以將添加標簽代碼保留在Submit函數中，並添加一個type="button" （以便按鈕不會在點擊時提交），供您在完成表單並使用其onClick事件來完成表單時使用。

例：

constructor(props) {
  super(props);

  this.handleDoneWithForm = this.handleDoneWithForm.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}

handleDoneWithForm() {

  // Code for when the form is finished

}

handleSubmit(event) {
  event.preventDefault();

  // Add tag code
}

render() {
  return (
    <form onSubmit={this.handleSubmit}> // will be triggered on enter

      // form inputs

      <button type="button" onClick={this.handleDoneWithForm}> // will be triggered on click
        Done with form
      </button>
    </form>
  );
}