React：如何处理列表输入框的handleChange及提交时传递对应数据

我有一个列表，每个项包含输入框用于显示display-sequence。现在需要在Post API调用中，将修改后的输入框值与对应的description-id作为集合传递，存储过程接收这两个参数来保存数据到数据库。请指导如何实现表单提交逻辑。

实现步骤 #

1. 调整状态结构 #

将state中的proddescriptions改为包含可编辑displaySequence的对象数组，方便跟踪每个项的修改：

• 解析XML后，把每个description节点转换为包含id、displaySequence、value的对象，存入状态。

2. 实现输入框变更处理函数 #

编写handleChange，根据输入框对应的description-id更新状态中对应的displaySequence值。

3. 实现表单提交逻辑 #

编写handleSubmit函数：

• 阻止表单默认提交行为
• 从状态中收集所有id和displaySequence组成请求数组
• 调用Post API传递该数组，对接后端存储过程

4. 修正输入框值绑定 #

渲染输入框时，绑定到状态中对应项的displaySequence，确保输入修改能实时反映到状态。

修改后的完整代码 #

import "./styles.css";
import React from "react";
import XMLParser from "react-xml-parser";

const data = `<?xml version="1.0"?>
<Category>
<description description-id="11" display-sequence="2">testing</description>
<description description-id="15" display-sequence="5">Guide</description>
<description description-id="20" display-sequence="7">test</description>
<description description-id="25" display-sequence="10">Guide</description>
<description description-id="30" display-sequence="12">test</description>
</Category>
</xml>`;

const REQUEST_URL = "";
const SUBMIT_URL = ""; // 替换为实际的Post接口地址

const axios = {
  get: () =>
    new Promise((resolve) => {
      setTimeout(resolve, 1000, { data });
    }),
  post: (url, payload) =>
    new Promise((resolve) => {
      // 模拟Post请求，实际项目替换为真实axios调用
      console.log("提交的数据:", payload);
      setTimeout(resolve, 1000, { status: "success" });
    })
};

class Sort_Descr extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      proddescriptions: []
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event, id) {
    const newSequence = event.target.value;
    this.setState(prevState => ({
      proddescriptions: prevState.proddescriptions.map(item => 
        item.id === id ? { ...item, displaySequence: newSequence } : item
      )
    }));
  }

  handleSubmit(event) {
    event.preventDefault();
    // 整理提交数据：[{descriptionId: xxx, displaySequence: xxx}, ...]
    const submitData = this.state.proddescriptions.map(item => ({
      descriptionId: item.id,
      displaySequence: item.displaySequence
    }));
    
    // 调用Post API
    axios.post(SUBMIT_URL, submitData)
      .then(response => {
        console.log("提交成功", response);
        // 提交成功后的处理，比如提示、刷新数据等
      })
      .catch(error => {
        console.error("提交失败", error);
      });
  }

  componentDidMount() {
    this.getlistofdescriptions();
  }

  getlistofdescriptions() {
    axios
      .get(REQUEST_URL, { "Content-Type": "application/xml; charset=utf-8" })
      .then((response) => {
        const jsonDataFromXml = new XMLParser().parseFromString(data);
        const descriptions = jsonDataFromXml.getElementsByTagName("description");
        // 转换为便于维护的对象数组
        const formattedDescriptions = descriptions.map(item => ({
          id: item.attributes["description-id"],
          displaySequence: item.attributes["display-sequence"],
          value: item.value
        }));
        this.setState({
          proddescriptions: formattedDescriptions
        });
      });
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <div>
            <ul style={{ listStyle: "none" }}>
              {this.state.proddescriptions.map((item) => {
                return (
                  <li key={item.id}>
                    {item.id}
                    <input
                      type="text"
                      size="5"
                      maxlength="3"
                      value={item.displaySequence}
                      onChange={(e) => this.handleChange(e, item.id)}
                    />
                    &nbsp; {item.value}
                  </li>
                );
              })}
            </ul>
          </div>

          <input type="submit" name="submit" value="Submit" id="btnsubmit" />
        </form>
      </div>
    );
  }
}

export default function App() {
  return (
    <div className="App">
      <h4>Sort list by updating the number in the textbox</h4>
      <Sort_Descr />
    </div>
  );
}

注意事项 #

• 替换SUBMIT_URL为实际的后端Post接口地址
• 模拟的axios.post需要替换为真实的axios调用（如果项目中已引入axios）
• 提交数据的格式可以根据后端要求调整，示例中是数组对象，若后端需要其他格式（如XML）可对应转换

内容的提问来源于stack exchange，提问作者TestUser