The default browser behavior for text
and password
inputs when ↵ is pressed is to activate the first <button>
that does not have type="button"
specified. The recommended way to structure your form is as follows:
render() {
const {fields: {firstName, lastName}, handleSubmit} = this.props.fields;
return (
<form onSubmit={handleSubmit}>
<button type="button">Load Data</button>
<button type="button">Delete Record</button>
<label>First Name</label>
<input type="text" {...firstName}/>
<label>Last Name</label>
<input type="text" {...lastName}/>
<button type="submit">Submit</button>
<button type="button">Do Something Else</button>
</form>
);
}
Things to notice:
handleSubmit
is on the <form>
element, not on the <button>
. It does not hurt to put it on the onClick
for
the button, but it doesn't accomplish anything.type="submit"
.type="button"
.