React中DisplayOrder文本框无法编辑的问题求助

你的问题核心在于状态管理逻辑错误：当前每个输入框绑定的是Feature数组里对应项的displayOrder值，但onChange事件却把输入值更新到了单个的DisplayOrder状态变量里，这就导致输入框始终显示原始的数组项值，无法同步你输入的内容。另外代码里还存在一个语法错误：name=="DisplayOrder"应该改成name="DisplayOrder"（双等号是比较运算符，这里应该用单等号赋值）。

修改方案 #

我们需要直接维护Feature数组的状态，当某个输入框变化时，精准更新数组中对应索引项的displayOrder值：

1. 移除状态中单个的DisplayOrder、FeatureID等冗余变量（因为这些值都可以从Feature数组中获取）
2. 编写一个专门的处理函数，用于更新对应项的displayOrder
3. 修正输入框的语法错误，并绑定正确的更新逻辑

修改后的完整代码 #

import React from "react";
import ReactHtmlParser from 'react-html-parser';

export class EditFeatures extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            Feature: [],
            loading: true // 新增loading状态，可选
        };
        // 绑定处理函数的this指向
        this.handleDisplayOrderChange = this.handleDisplayOrderChange.bind(this);
    }

    componentDidMount() {
        this.DisplayFeatures();
    }

    DisplayFeatures() {
        fetch(REQUEST_URL, { "Content-Type": "application/xml; charset=utf-8" })
            .then(response => response.json())
            .then((data) => {
                this.setState({
                    Feature: data,
                    loading: false
                })
            })
            .catch(err => console.error('获取数据失败:', err)) // 新增错误捕获
    }

    // 处理displayOrder输入框的变化
    handleDisplayOrderChange(index, value) {
        // 复制原数组，避免直接修改状态
        const updatedFeatures = [...this.state.Feature];
        // 更新对应索引项的displayOrder
        updatedFeatures[index].displayOrder = value;
        // 更新状态
        this.setState({ Feature: updatedFeatures });
    }

    render() {
        // 加载状态提示，可选
        if (this.state.loading) {
            return <div>加载中...</div>;
        }

        return (
            <div>
                <form>
                    <table width="100%" cellpadding="0" cellspacing="0" border="1">
                        <tbody>
                            {this.state.Feature.map((item, index) => (
                                <tr key={item.featureID.trim()}> {/* 注意featureID末尾有逗号，用trim处理避免key重复 */}
                                    <td width="50px">
                                        {item.featureID}
                                        <input 
                                            type="text" 
                                            name="DisplayOrder" 
                                            size="5" 
                                            maxLength="10" 
                                            value={item.displayOrder} 
                                            onChange={(ev) => this.handleDisplayOrderChange(index, ev.target.value)} 
                                        />
                                    </td>
                                    <td align="left"><font size="3">{ReactHtmlParser(item.descrText)}</font></td>
                                    <td align="left">{ReactHtmlParser(item.featureText)}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                    <button type="submit" name="submit">Update</button>
                </form>
            </div>
        );
    }
}

export default EditFeatures;

关键修改点说明 #

• 状态维护：直接操作Feature数组，通过复制数组并修改对应项的方式更新状态，符合React不可变状态的原则
• 索引定位：利用map的index参数，精准找到需要更新的列表项
• 语法修正：把name=="DisplayOrder"改为name="DisplayOrder"，修复无效的属性赋值
• 额外优化：新增loading状态提示、错误捕获，以及处理featureID末尾的逗号避免key重复问题

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