React：如何执行handleChange和handleSubmit来动态添加输入文本框？

我正在显示一个列表。列表中的每个项目都有一个文本框。文本框显示显示顺序。请找到沙箱：https://codesandbox.io/s/solitary-butterfly-4tg2w0

在 Post API 调用中，如何将更改的文本框值与相应的描述 ID 作为集合传递。 StoredProcedure以description-id和display-sequence作为参数，将更改的数据保存到数据库中。

请帮助提交表单如何做到这一点？谢谢

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 axios = {
  get: () =>
    new Promise((resolve) => {
      setTimeout(resolve, 1000, { data });
    })
};

class Sort_Descr extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      proddescriptions: [],
      proddescription_id: "",
      display_sequence: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {}
  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"
        );
        console.log(descriptions);
        this.setState({
          proddescriptions: jsonDataFromXml.getElementsByTagName("description")
        });
      });
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <div>
            <ul style={{ listStyle: "none" }}>
              {this.state.proddescriptions.map((item, index) => {
                return (
                  <li key={item.attributes["description-id"]}>
                    {item.attributes["description-id"]}
                    <input
                      type="text"
                      size="5"
                      maxlength="3"
                      value={item.attributes["display-sequence"]}
                      onChange={this.handleChange}
                    />
                    &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>
  );
}

我建议不要在状态中存储和更新 JSON/XML 数据，而是将其映射到更容易识别和更新的更简单的对象。反应状态应该是minimal代表您的信息所需的数据量，仅存储您需要的数据。

const proddescriptions = descriptions.map(({ attributes, value }) => ({
  id: attributes["description-id"],
  sequence: attributes["display-sequence"],
  value
}));
this.setState({ proddescriptions });

绘制地图时state.proddescriptions对于输入，使用id作为输入name更新时用于标识的属性值。

{this.state.proddescriptions.map((item) => (
  <li key={item.id}>
    <label>
      {item.id}
      <input
        type="text"
        name={item.id} // <-- name attribute
        size="5"
        maxLength="3"
        value={item.sequence}
        onChange={this.handleChange}
      />
    </label>
    &nbsp; {item.value}
  </li>
))}

实施handleChange浅复制先前的状态并通过 id 更新匹配的数组元素。

handleChange = (event) => {
  const { name, value } = event.target;
  this.setState((prevState) => ({
    proddescriptions: prevState.proddescriptions.map((el) =>
      el.id === name
        ? {
            ...el,
            sequence: value
          }
        : el
    )
  }));
};

In the handleSubmit回调使用onSubmit事件对象阻止默认表单操作并访问当前state.proddescriptions并将其映射回您的 API 期望的任何格式。

handleSubmit = (event) => {
  event.preventDefault();
  console.log(this.state.proddescriptions);
  // manipulate `state.proddescriptions` into a request payload
};