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

Question

按下回车键时，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

Answer 1

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

最简单的实现是:

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

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

<form onSubmit={this.submitHandler}>

执行如下

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