javascript - React - 动态表中的 OnChange 调用会产生 Uncaught TypeError

Question

当前，当创建表及其行的严格要求发挥作用时，我遇到了错误。请注意，我省略了代码中不相关的方面，问题被隔离到将 onChange 添加到表行的输入时。

我不确定为什么会出现这个问题，但我假设这可能与该表是基于映射动态创建的事实有关，并且在创建表行时出现了一些问题，并且我'我缺少某种类型的正确语法来在这种情况下正确调用 onChange？

class SkillTable extends React.Component<any,any>
{
  constructor(props: any) {
    super(props);

    this.state = {
      skillList: [],
      unTrainedList: [],
      classSkill: [],
      playerSkills: [],
    };
    this.handlePopulates = this.handlePopulates.bind(this);
    this.handleSkillChange = this.handleSkillChange.bind(this);
  }


renderTableRows(skill, index)
  {

    return (
      <tr key={index}>
        <td>{skill.unTrainedTrue()}</td>
        <td>{skill.classSkillTrue()}</td>
        <td>{skill.skillName}</td>
        <td>{skill.abilityName}</td>
        <td>{skill.skillTotal}</td>
        <td> <input type="number" value={skill.skillRank} onChange={this.handleSkillChange}/> </td>
        <td> <input type="number" value={skill.abilityMod}/> </td>
        <td> <input type="number" value={skill.raceMod}/> </td>
        <td> <input type="number" value={skill.miscMod}/> </td>
        <td> <input type="number" value={skill.synergyMod}/> </td>
        <td> <input type="number" value={skill.skillCost}/> </td>
      </tr>
    )
  }


  render() {
    return (
      <div>
        <table className="table table-bordered">
          <thead>
            <tr>
              <th>UT</th>
              <th>CS</th>
              <th>Skill Name</th>
              <th>Ability</th>
              <th>Skill Total</th>
              <th>Rank</th>
              <th>Ability Mod</th>
              <th>Race Mod</th>
              <th>Misc Mod</th>
              <th>Synergy Mod</th>
              <th>Skill Cost</th>
            </tr>
          </thead>

          <tbody>
            {this.state.playerSkills.map(this.renderTableRows)}
          </tbody>

        </table>
        </div>
    );
  }
}


  handleSkillChange(evt)
  {
    //LOGIC HERE, BUT CRASH ON CALL
  }

Answer 1

我认为您也应该将 renderTableRows 绑定(bind)到您的组件。示例:

constructor(props: any) {
  super(props);

  this.state = {
    skillList: [],
    unTrainedList: [],
    classSkill: [],
    playerSkills: [],
  };
  this.handlePopulates = this.handlePopulates.bind(this);
  this.handleSkillChange = this.handleSkillChange.bind(this);
  this.renderTableRows = this.renderTableRows.bind(this);
}