Реагируйте JS, две кнопки отправки в одной форме - PullRequest
Новая
       8

Реагируйте JS, две кнопки отправки в одной форме

1 голос
/ 22 февраля 2020

При использовании React JS, как определить, какая кнопка использовалась для отправки формы? Я думал, что-то вроде этого будет работать, но это не так. 

export default function App() {
  const onSubmit = e => {
    e.preventDefault();
    console.log(e.target.btn.value);
  };

  return (
    <form className="App" onSubmit={onSubmit}>
      <button type="submit" name="btn" value="wow">
        Button 1
      </button>
      <button type="submit" name="btn" value="oh no">
        Button 2
      </button>
    </form>
  );
}

Код песочница

В соответствии со стандартом HTML вы должны быть в состоянии назвать два кнопки одноименные? Или используйте атрибут formaction, чтобы различать guish их.

В моем случае кнопки не знают о форме. Я хочу избежать решения, когда я использую какое-то временное состояние, чтобы запомнить, какая кнопка была нажата.

В стандартном HTML вы можете сделать это: 

<form action="/action_page.php">
  <input type="submit" name="btn" value="Submit">
  <input type="submit" name="btn" value="Submit2">
</form>

Когда вы отправляете форму btn будет опубликовано Submit или Submit2 в зависимости от того, на какую кнопку вы нажали. Я хочу максимально приблизиться к этому стандарту при создании формы React. Используйте как можно меньше помощи от Javascript и реагируйте насколько это возможно. По сути, просто добавьте кнопки в DOM внутри моей формы и соберите значения из события, к которому у меня есть доступ внутри обработчика отправки.

Ответы [ 2 ]

0 голосов
/ 23 февраля 2020

Работа с формами в ReactJS довольно проста, если вы знаете, как работает ввод. Вот еще немного информации непосредственно из документации: https://reactjs.org/docs/forms.html

А вот небольшой пример, который я вам объясню: 

      // You need to add a onSubmit event to the form. This will trigger when you submit the for as you do any other html form (including pressing the submit button)
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          // need to save input value somewhere (use the state for this, check the link from above
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        // this is your button, as with other html forms.
        <input type="submit" value="Submit" />
      </form>

В случае Вы описали, что вы не должны отправлять данные внутри кнопок (зачем вам это нужно?), а вместо этого отправлять данные формы внутри входных данных. Если вам действительно нужны две кнопки для отправки (хотя форму можно отправить, например, нажав клавишу enter), вы можете сделать это следующим образом: 

    // onSubmit is the same as before, handle form data here
    <form className="App" onSubmit={onSubmit}>
      // setSubmitButton would set the submit button to button1 (e.g. use react state for this)
      <button type="submit" onClick={setSubmitButton('button1')} name="btn" value="wow">
        Button 1
      </button>
      <button type="submit" onClick={setSubmitButton('button2')} name="btn" value="oh no">
        Button 2
      </button>
    </form>
0 голосов
/ 22 февраля 2020

Либо вы можете попробовать приведенный ниже код, либо вы можете сделать отдельные звонки для обеих кнопок.

Демонстрационная ссылка codesandox 

import React from "react";
import "./styles.css";

export default function App() {
  const state = {
    button: 1
  };

  const onSubmit = e => {
    e.preventDefault();
    if (state.button === 1) {
      console.log("Button 1 clicked!");
    }
    if (state.button === 2) {
      console.log("Button 2 clicked!");
    }
  };

  return (
    <form className="App" onSubmit={onSubmit}>
      <button
        onClick={() => (state.button = 1)}
        type="submit"
        name="btn1"
        value="wow"
      >
        Button 1
      </button>
      <button
        onClick={() => (state.button = 2)}
        type="submit"
        name="btn2"
        value="oh no"
      >
        Button 2
      </button>
    </form>
  );
}
...