reactjs - 在 ReactJS 中提交具有多个提交按钮的表单

Question

有一个输入元素，其值由用户给出。和 3 个按钮，其值来自各州。

因此，当我将输入值设置为“11”并按 SUBMIT1 按钮时，控制台中的输出应该是 {userId: "11", submit1: "1"}

相反，我也得到了整个提交值

{userId: "11", submit1: "1", submit2: "2", submit3: "3"}

另外，我收到了一个响应错误（第 23 行）：我正在尝试发送一个 INPUT 值和一个提交值（被点击的按钮..）

PostForm.jsx 文件

import React, { Component } from "react";
import axios from "axios";
class PostForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      userId: "",
      submit1: "1",
      submit2: "2",
      submit3: "3"
    };
  }

  changeHandler = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  submitHandler = e => {
    e.preventDefault();
    console.log(this.state);
    axios
      .post(
        "https://jsonplaceholder.typicode.com/posts/${userId}/${submit}",
        this.state
      )
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error);
      });
  };

  render() {
    const { userId, submit1, submit2, submit3 } = this.state;
    return (
      <div>
        <form onSubmit={this.submitHandler}>
          <div>
            <input
              type="text"
              name="userId"
              value={userId}
              onChange={this.changeHandler}
            />
          </div>

          <button value={submit1} onChange={this.changeHandler} type="submit">
            Submit1
          </button>
          <button value={submit2} onChange={this.changeHandler} type="submit">
            Submit2
          </button>
          <button value={submit3} onChange={this.changeHandler} type="submit">
            Submit3
          </button>
        </form>
      </div>
    );
  }
}

export default PostForm;

https://codesandbox.io/s/vigorous-ptolemy-p1s4i

标签： reactjs

Answer 1

您需要从每个提交按钮的 onClick 方法调用提交方法，您的 jsonplaceholder 也有问题：您不需要在 POST 方法中发送整个路由....只需有效负载就足够了

此外，您不需要按钮上的 onChange 方法....我删除了它们。

import React, { Component } from "react";
import axios from "axios";
class PostForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      userId: "",
      submit1: "1",
      submit2: "2",
      submit3: "3"
    };
  }

  buildPayload = submitName => {
    return { [`submit${submitName}`]: submitName, userId: this.state.userId };
  };

  changeHandler = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  submitHandler = (submitName) => {
    const payload = this.buildPayload(submitName);
    console.log(payload);
    axios
      .post(`https://jsonplaceholder.typicode.com/posts`, payload)
      .then(response => {
        console.log(response);
        // If you need the data here so do the following
        console.log(response.data)
      })
      .catch(error => {
        console.log(error);
      });
  };

  render() {
    const { userId, submit1, submit2, submit3 } = this.state;
    return (
      <div>
        <form onSubmit={e => e.preventDefault()}>
          <div>
            <input
              type="text"
              name="userId"
              value={userId}
              onChange={this.changeHandler}
            />
          </div>

          <button
            value={submit1}
            onClick={() => this.submitHandler(this.state.submit1)}
          >
            Submit1
          </button>
          <button
            value={submit2}
            onClick={() => this.submitHandler(this.state.submit2)}
          >
            Submit2
          </button>
          <button
            value={submit3}
            onClick={() => this.submitHandler(this.state.submit3)}
          >
            Submit3
          </button>
        </form>
      </div>
    );
  }
}

export default PostForm;

输出（在控制台中）：

{userId: "11", submit1: "1"} 

在控制台中

现在，如果您愿意，您还可以将提交方法重构为异步方法....只是为了使其更清洁：

  submitHandler = async (submitName) => {
     const payload = this.buildPayload(submitName);
     const response = await axios.post(`https://jsonplaceholder.typicode.com/posts`, payload)
     console.log(response.data);
  };