React Form onsubmit不注意“ Enter”按钮

Question

我正在以一种包括标签输入的形式进行工作。如果用户输入标签并命中输入，则将标签添加到某个数组中。但是，当我击中Enter时，它也会提交表格。当然，我可以添加e.preventDefault()技巧，但是再说一次，它仍然会运行JavaScript代码，当我尝试输入标签时我不想要的东西。

因此，我尝试添加if语句以注意是否要输入键是否等于输入，但我猜该表格是否单击了哪个按钮。

因此，如果我点击表单上的输入，则此功能将运行。

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键提交？例如，如何使用表格或其他内容使用该关键代码？我尝试添加一个事件侦听器，但这没有解决，因为它会在输入以外的其他按钮时提交。

。

对于上下文，我的标签输入函数从关键事件发射。

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事件，因此假设您想使用" Enter"来添加标签，则可以将添加标签代码留在提交功能并添加一个带有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>
  );
}