Добавить / удалить поля ввода с помощью 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

Ваш код работает с небольшими исправлениями.См. здесь

1. У вас есть точки в onClick=
2. Кажется, вы ошиблись removeAttributeForm.Копирование / вставка оригинального имени функции (removeAttribbuteForm с двумя bb) устраняет все ошибки