使用React添加/删除输入字段

Question

我试图使用react添加和删除输入字段。我已经成功地添加了文件，但不能删除字段，甚至不能触发警报！有人能看到我做错了什么吗？

let count = 0;
class RedirectURI extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        attributeForm: []
    };
    this.addAttributeForm();
 }
removeAttribbuteForm(){
    alert('boom!');
}
addAttributeForm() {

     count=count+1;
     console.log(count);

    var array = this.state.attributeForm;
    if (count >= 10){
       document.getElementById('addURI').style.display = "none";
       return false;

     } else {
     array.push(
          <div>
              <label htmlFor="redirect-URI">Redirect URI</label>
              <input name="redirect-URI" />
              <button className="remove-input" onClick= . 
            {this.removeAttributeForm.bind(this)}>remove</button>
          </div>
    );

    this.setState({
        attributeForm: array
    });
     }
}

render() {
  return (
      <div>
          { 
            this.state.attributeForm.map(input => {
                return input
            })
          }
          <button id="addURI" onClick= . 
  {this.addAttributeForm.bind(this)}>Add Redirect URI</button>
      </div>
  );
 }
 }

ReactDOM.render(<RedirectURI />, document.getElementById('app'));

误差

react-dom.production.min.js:157 Uncaught TypeError: Cannot read property 'bind' of undefined
at RedirectURI.addAttributeForm (pen.js:30)
at new RedirectURI

Answer 1

您的代码适用于小更正。请参阅这里

1. 你在onClick=中有点
2. 看来你拼错了removeAttributeForm。复制/粘贴原始函数名(即removeAttribbuteForm和两个bb)解决了所有错误