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 绑定到您的组件。例子：

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);

}