Question

按下回车时反应阻止表单提交

我有以下React Search Bar组件，父容器可以使用

进行调用

<SearchBar onInputChange={this.handleInputChange} />

每次用户更改输入时，都会通知父容器。这就是我的搜索栏不需要任何提交按钮的原因。

但是，我发现如果我在搜索栏中按Enter键，整个页面会刷新。我不想那样。

我知道如果表单中有一个按钮，我可以调用event.preventDefault（）。但在这种情况下，我没有按钮所以我不知道该怎么做

class SearchBar extends Component {
    constructor(props) {
        super(props);
        this.state = { value: '' };
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(e) {
        this.setState({ value: e.target.value });
        this.props.onInputChange(e.target.value);
    }

    render() {
        return (
        <div id="search-bar">
            <form>
            <FormGroup controlId="formBasicText">
                <FormControl
                type="text"
                onChange={this.handleChange}
                value={this.state.value}
                placeholder="Enter Character Name"
                />          
            </FormGroup>
            </form>
        </div>
        );
    }
}

export default SearchBar

Answer 1

您需要创建一个表单处理程序，以阻止默认的表单操作。

最简单的实现方式是：

<form onSubmit={e => { e.preventDefault(); }}>

但理想情况下，您可以为此创建专用处理程序：

<form onSubmit={this.submitHandler}>

具有以下实现

submitHandler(e) {
    e.preventDefault();
}

Answer 2

我不确定这是否适用于所有情况，因为当您在表单的输入字段中按Enter键时，尽管默认的提交不会发生，但您仍然会触发onSubmit方法。这意味着您仍将触发为表单设计的伪提交操作。一种带有ES6的衬板，可以专门，彻底地解决该问题：

<input onKeyPress={(e)=>{e.target.keyCode === 13 && e.preventDefault();}} />

此解决方案应具有0种副作用，并直接解决问题。

Answer 3

在一个带有Search输入字段的React组件中，该组件嵌套在一个较大的（非React OR React）形式中，这对我来说最适合跨浏览器使用：

<MyInputWidget
  label="Find"
  placeholder="Search..."
  onChange={this.search}
  onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }}
  value={this.state.searchText} />

“（e）=> {e.target.keyCode === 13”（@ DavidKamer的答案）不正确：您不希望event.target。这是输入字段。您想要事件本身。在React（目前为16.8）中，您需要event.key（e.key，任何您想调用的名称）。

Answer 4

Eon也建议防止ENTER的最佳方法是将以下内容添加到输入元素：

onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }}

Answer 5

阻止搜索输入的 Enter 键：

<input type="text" onKeyPress={e => {
  if (e.key === 'Enter') e.preventDefault();
}} />

在输入内输入时反应阻止表单提交

5 个答案: