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) {&nbsp; super(props);&nbsp; this.state = {&nbsp; &nbsp; skillList: [],&nbsp; &nbsp; unTrainedList: [],&nbsp; &nbsp; classSkill: [],&nbsp; &nbsp; playerSkills: [],&nbsp; };&nbsp; this.handlePopulates = this.handlePopulates.bind(this);&nbsp; this.handleSkillChange = this.handleSkillChange.bind(this);&nbsp; this.renderTableRows = this.renderTableRows.bind(this);}