Как программно вызвать событие onsubmit в reactjs?

Мне нужно программно вызвать событие 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

Вы можете опубликовать свое решение? Даже если не работает? Мы не будем здесь кодить для вас ...

Mario Murrent 02.05.2018 08:48
<div onClick = {this.yourOnSubmitFunction} />
Amanshu Kataria 02.05.2018 09:13

но вы можете выполнить event.preventDefault () в onSubmit, тогда вы можете вызвать любую функцию, которую хотите, или получить событие onSubmit, чтобы что-то сделать? onSubmit = (e) => {e.preventDefault; console.info (e)}

max li 02.05.2018 09:20
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
1 822
1

Ответы 1

Найдите пример здесь. Ключ состоит в том, чтобы прикрепить обработчик событий к 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"));

Другие вопросы по теме