无法读取空反应的 属性 'appendChild'

Question

我正在尝试使用 this js guide 动态添加新的输入字段。一切都适用于纯 js，但是当我尝试调整它以做出反应时，我收到此错误：TypeError: Cannot read 属性 'appendChild' of null

import React, { Component } from "react";

class addTeams extends Component {
  constructor() {
    super();
    this.state = {
      data: [],
    };
  }


  addInput(divName) {
    var counter = 1;
    var limit = 5;
    if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
  }

  render() {
    return (
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-md-offset-3">
            <div class="jumbotron text-center">
              <form method="POST">
                <div id="dynamicInput">
                  Entry 1<br></br><input type="text" name="myInputs[]"></input>
                </div>
                <input type="button" value="Add another text input" onClick={this.addInput('dynamicInput')}></input>
              </form>
              <button type="submit" onClick={this.addTournament} class="btn btn-primary">Submit</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default addTeams;

Answer 1

您检查过 addInput 是否有效吗？

在构造函数中，尝试键入 this.addInput = this.addInput.bind(this);

并且您应该将 addInput 作用域中的计数器变量更改为状态对象。