React文本框无法编辑及如何以数组形式提交修改数据

1. 修复文本框无法编辑问题 #

当前文本框值直接绑定XML解析后的原始属性，未关联到组件state且无变更处理逻辑。需将解析后的数据转换为可维护的对象数组，把每个项的display-sequence存入state，并实现变更回调更新对应值。

2. 实现表单提交逻辑 #

提交时收集所有description-id与修改后的display-sequence组成的集合，通过POST请求发送到后端API，调用存储过程完成数据保存。

修改后的完整代码 #

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 = ""; // 替换为实际提交API地址

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

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(descriptionId, event) {
    const { value } = event.target;
    // 过滤非数字输入
    if (!/^\d*$/.test(value)) return;
    
    this.setState(prevState => ({
      proddescriptions: prevState.proddescriptions.map(item => 
        item.id === descriptionId 
          ? { ...item, displaySequence: value } 
          : item
      )
    }));
  }

  handleSubmit(event) {
    event.preventDefault();
    // 收集提交数据：过滤掉未修改的项（可选，根据后端需求调整）
    const submitData = this.state.proddescriptions.map(item => ({
      "description-id": item.id,
      "display-sequence": item.displaySequence
    }));
    
    // 发送POST请求
    axios.post(SUBMIT_URL, submitData, {
      headers: { "Content-Type": "application/json" } // 根据后端要求调整Content-Type
    })
    .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(item.id, e)}
                    />
                    &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>
  );
}

关键修改说明 #

• 数据格式转换：将XML解析后的原始数据转换为包含id、displaySequence、value的对象数组，存入state以便修改。
• 输入处理：handleChange函数接收description-id，精准更新对应项的displaySequence，同时添加数字输入过滤，避免非法值。
• 提交逻辑：handleSubmit阻止默认表单提交，收集所有项的description-id和display-sequence，通过POST请求发送到后端，同时处理请求成功/失败的回调。
• 模拟axios POST：添加了模拟的POST方法，实际项目中替换为真实的axios调用即可。

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