React DataTable组件无法设置输入框初始值及无法编辑内容如何解决

1. 事件名拼写错误：createRow方法中输入框的onChange属性绑定的是this.handlehange，正确方法名是handleChange，少写了字母c，导致输入事件无法触发，因此无法输入内容。
2. 状态设计不合理：所有输入框共用同一个state.value，既无法为每个输入框绑定对应条目的amount初始值，也会导致修改任意输入框时所有输入框内容同步变更。
3. 未将props传入的初始数据同步到组件状态，无法实现初始值绑定。

调整状态结构，以存款条目的唯一id为key存储对应金额，实现每个输入框独立的状态管理，修改后的完整代码如下：

import React, { Component } from 'react';
import $ from 'jquery';

export default class Datatable extends Component {
  constructor(props) {
    super(props)
    // 调整state结构，用对象存储每个id对应的金额
    this.state = {
      depositValues: {}
    }
    this.generateHeader = this.generateHeader.bind(this);
    this.generateTableData = this.generateTableData.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  // 组件挂载后把传入的初始amount存入state
  componentDidMount() {
    const tableData = this.props.snapshotData.data.deposits;
    const allDeposits = [...tableData.Investment, ...tableData.Liquid, ...tableData.Savings];
    const initValues = {};
    allDeposits.forEach(item => {
      initValues[item.id] = item.amount;
    });
    this.setState({ depositValues: initValues });
  }

  handleChange(event) {
    // 根据输入框绑定的id更新对应条目的金额
    const depositId = event.target.dataset.id;
    this.setState({
      depositValues: {
        ...this.state.depositValues,
        [depositId]: event.target.value
      }
    });
  }

  generateHeader() {
    const columnHeader = ["Deposit name", "Amount"]
    let res = [];
    for (var i = 0; i < columnHeader.length; i++) {
      res.push(<th key={columnHeader[i]}>{columnHeader[i]}</th>)
    }
    return res;
  }

  generateTableData() {
    let tableData = this.props.snapshotData.data.deposits;
    let invenstments = tableData.Investment;
    let liquid = tableData.Liquid;
    let savings = tableData.Savings;
    let arr = $.merge(this.createRow(invenstments), this.createRow(liquid))
    let res = $.merge(arr, this.createRow(savings));
    return res;
  }

  createRow(data) {
    let res = [];
    for (var i = 0; i < data.length; i++) {
      res.push(
        // 给tr加唯一key
        <tr key={data[i].id}>
          <td>{data[i].deposit_name}</td>
          {/* 给输入框绑定对应id的状态值，添加data-id属性标识对应条目 */}
          <td><input type="text" value={this.state.depositValues[data[i].id]} onChange={this.handleChange} data-id={data[i].id} /></td>
        </tr>
      )
    }
    return res;
  }

  render() {
    return (
      <div className="row">
        <div className="col-12">
          <div className="card">
            <div className="card-header">
              <h3 className="card-title">DataTable with default features</h3>
            </div>
            <div className="card-body">
              <table id="example1" className="table table-bordered table-striped">
                <thead>
                  <tr>
                    {this.generateHeader()}
                  </tr>
                </thead>
                <tbody>
                  {this.generateTableData()}
                </tbody>
                <tfoot>
                  <tr>
                    {this.generateHeader()}
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

后续如果需要获取修改后的所有金额，直接读取this.state.depositValues即可拿到所有id对应更新后的金额。

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