当在输入中按下 Enter 时，React 会阻止表单提交

IT技术 javascript reactjs
2021-05-20 08:32:32

当按下回车键时，React 会阻止表单提交

我有以下 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
4个回答

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

最简单的实现是：

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

但理想情况下，您为此创建了一个专用处理程序：

<form onSubmit={this.submitHandler}>

具有以下实现

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

在一个带有搜索输入字段的 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.That's the input field。你想要事件本身。在 React（目前特别是 16.8）中，你想要event.key（e.key，无论你想怎么称呼它）。

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

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

这个方案应该是0副作用，直接解决问题。

正如 Eon 所建议的，防止 ENTER 的最佳方法是将以下内容添加到您的输入元素中：

onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }}
其它你可能感兴趣的问题
上一篇斜坡 1.4 和挤出机 下一篇我的 3D 打印机完全没电了吗？