React+C# 下拉菜单取值渲染问题：井文件分类值无法存入数据库

我在网站的文件标签页新增了分类下拉菜单，用于辅助用户给文件标注分类，优化文件管理效率。目前遇到下拉菜单取值问题：点击保存时分类值无法存入数据库，重载页面时也无法和其他油井文件信息一同渲染。

该功能全站已有通用实现，但本次场景的特殊点在于：下拉菜单值不是直接传入界面，而是存入IWell的数组中，定义如下：

Public Files: AttachedFile [] = []

目前的问题表现为：下拉菜单可以正常显示，但变更选项时没有日志输出，保存时也不会存储分类下拉菜单的取值。

相关代码 #

下拉菜单构建渲染代码 #

private handleInputChange(event: any) {
    const category = this.state.well;
    category[event.target.name] = event.target.value;
    console.log(category);
    this.setState({
    isDirty: true,
    selectedFile: category,
    });
}

public renderDropdown = ({}) => (event: any) => {
    return (
        <FormGroup >
            <EInput
                type="select"
                name="Category"
                value={this.state.well.files}
                onChange={this.handleInputChange[event]}
            >
                <option value="" />
                <option value="Not Categorized">Not Categorized</option>
                <option value="Signed Documents">Signed Documents</option>
                <option value="Unsigned Documents">Unsigned Documents</option>
                <option value="3rd Party Documents">3rd Party Documents</option>
                <option value="General Well Info">General Well Info</option>
            </EInput>
        </FormGroup>
    );
}

文件列表渲染代码 #

我们通过遍历well.files获取每个分类来渲染文件信息：

private formatWellFiles = () => {
    const files = this.state.well.files;
    const headers = [
        "File Name",
        "Category",
        "Size",
        "Uploaded By",
        "Upload Date",
        "Download",
    ];
    const rows = files.map(f => {
        return [
            {
                content: f.name
            },
            {
                content: this.renderDropdown(f.category),
                type: 'render'
            },
            {
                content: this.renderSize(f.size),
                sortItem: Number(f.size),
                type: 'render'
            },
            {
                content: f.createUser
            },
            {
                content: f.createDate
            },
            {
                content: this.renderDownload(f),
                type: 'render',
            },
        ];

    });

语法限制 #

现有规则禁止使用行内绑定写法，否则会报错Binds are forbidden：

onChange={event => this.handleInputChange(event)}

修复方案 #

根因梳理 #

1. renderDropdown参数逻辑错误：调用时传入了文件分类值，但函数没有接收对应参数，也没有绑定文件标识，无法区分修改的是哪个文件的分类
2. 下拉框value绑定错误：绑定了整个this.state.well.files数组，而非当前文件的分类字段
3. onChange绑定错误：this.handleInputChange[event]是从函数对象上取属性，根本不会触发函数执行，所以无日志、无值更新
4. 状态更新逻辑错误：直接突变了state中的well对象，且更新的是selectedFile而非well.files数组，保存和渲染都取不到正确值

代码修改 #

1. 重写renderDropdown，接收文件索引和当前分类

public renderDropdown = (fileIndex: number, currentCategory: string) => {
    return (
        <FormGroup >
            <EInput
                type="select"
                name="Category"
                value={currentCategory}
                onChange={this.handleCategoryChange(fileIndex)}
            >
                <option value="" />
                <option value="Not Categorized">未分类</option>
                <option value="Signed Documents">已签署文件</option>
                <option value="Unsigned Documents">未签署文件</option>
                <option value="3rd Party Documents">第三方文件</option>
                <option value="General Well Info">油井基础信息</option>
            </EInput>
        </FormGroup>
    );
}

2. 新增分类修改处理函数，规避行内绑定限制

private handleCategoryChange = (fileIndex: number) => (event: any) => {
    // 拷贝文件数组避免直接修改状态
    const updatedFiles = [...this.state.well.files];
    // 更新对应索引文件的分类
    updatedFiles[fileIndex].category = event.target.value;
    console.log('更新后文件分类', updatedFiles[fileIndex]);
    // 同步更新state
    this.setState({
        isDirty: true,
        well: {
            ...this.state.well,
            files: updatedFiles
        }
    });
}

3. 修改文件遍历逻辑，传入正确参数

const rows = files.map((f, index) => {
    return [
        {
            content: f.name
        },
        {
            content: this.renderDropdown(index, f.category),
            type: 'render'
        },
        // 其余代码保持不变
    ]
})

效果验证 #

• 切换下拉选项后控制台会打印对应文件的更新后分类
• 保存时直接取this.state.well.files即可拿到全量带分类的文件数据
• 页面重载后下拉框会自动回显接口返回的分类值

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