使用react和e.preventDefault（）阻止表单提交；

Question

I can't seem to figure this out.... Which event makes sense to bind a function call on to action e.preventDefault(); in the event that someone clicks enter when they fill in the input tag?

At the moment i get an unwanted refresh happening. When i just want to trigger another function when the enter key is hit.

What should i do?

<form onSubmit={this.stopSubmit}>
                        <FormGroup
                            controlId="formBasicText"
                            validationState={getValidationState()}
                        >
                            <ControlLabel>Stuff</ControlLabel>
                            <FormControl
                                type="text"
                                value={this.state.value}
                                placeholder="Enter text"
                                onChange={handleChange}
                                onKeyUp={handleSubmit.bind(this, "test")}

                            />
                            <FormControl.Feedback/>
                            <HelpBlock>Validation is based on string length.</HelpBlock>
                        </FormGroup>
                    </form>

Answer 1

this.stopSubmit应该返回false以防止表单提交

Answer 2

将此添加到表单标签：

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

Answer 3

The event is the form submission. You can read up on it at Mozilla .

Really it depends on what your form is doing. Usually you will put your event.preventDefault() function call in whatever you're submitting your form to.(ie: what the value of the action parameter is) If its an AJAX call, for instance, you'll want to put that at the beginning of the function.

At least, thats what I do. Here is an example of a recent function I used for a form submission that utilizes it.

handleFormSubmit = event => {
  event.preventDefault();
  this.searchMovies(this.state.search);
};