Мне нужно программно вызвать событие onsubmit формы при щелчке элемента div. На самом деле я не хочу отправлять форму. Я просто хочу вызвать событие onSubmit. Как мне этого добиться?
<form onSubmit = {(event)=> {event.preventDefault();this.submitFunction()}>
<ButtonWithIcon onClick = {this.onClick} type = "submit">
</div>
</form>
onClick=()=> { //need to call the call the onsubmit event }
ButtonWithIcon - это настраиваемый компонент, у которого есть значок. Таким образом, нажатие на значок не отправит форму. При нажатии значка мне нужно
{(event)=> {event.preventDefault();this.submitFunction()} to execute
<div onClick = {this.yourOnSubmitFunction} />
но вы можете выполнить event.preventDefault () в onSubmit, тогда вы можете вызвать любую функцию, которую хотите, или получить событие onSubmit, чтобы что-то сделать? onSubmit = (e) => {e.preventDefault; console.info (e)}
Найдите пример здесь. Ключ состоит в том, чтобы прикрепить обработчик событий к div, который отправляет форму, то есть <div onClick = {this.handleSubmit}>SOME DIV</div>
.
import React from "react";
import { render } from "react-dom";
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = { value: "" };
this.handleChangeEvent = this.handleChangeEvent.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChangeEvent(event) {
this.setState({ value: event.target.value });
}
handleSubmit(event) {
alert("A name was submitted: " + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit = {this.handleSubmit}>
<div onClick = {this.handleSubmit}>SOME DIV</div>
<label>
Name:
<input
type = "text"
value = {this.state.value}
onChange = {this.handleChangeEvent}
/>
</label>
<input type = "submit" value = "Submit" />
</form>
);
}
}
render(<NameForm />, document.getElementById("root"));
Вы можете опубликовать свое решение? Даже если не работает? Мы не будем здесь кодить для вас ...