Реакция - вызов OnChange в таблице Dynami c приводит к 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);
}