使用React

Question

我正在尝试使用添加和删除输入字段 反应。我设法成功添加了文件，但无法删除该字段，甚至无法触发警报！有人可以看到我在做什么错吗？

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

您的代码可以进行较小的更正。参见here

1. 您在onClick=中有点
2. 您似乎拼错了removeAttributeForm。复制/粘贴原始函数名称（带有两个removeAttribbuteForm的{​​{1}}）解决了所有错误