Реакция, добавление компонентов в компонент

Question

Я начал изучать Реакт, и я ударил первую стену.

У меня есть компонент списка, который должен отображать список строк + кнопку для добавления новой строки.

Все в этих 2 гов:

https://gist.github.com/matiit/7b361dee3f878502e10a

https://gist.github.com/matiit/8bac28c4d5c6ce3993c7

Метод addRow выполняется по щелчку, потому что я могу увидеть console.log, но не InputRows не добавлены.

Не может понять, почему.

Это немного обновленный (грязный) код, который тоже не работает. Теперь это только один файл:

var InputList = React.createClass({ 

    getInitialState: function() { 
     return { 
      rowCount: 1 
     } 
    }, 

    getClassNames: function() { 
     if (this.props.type === 'incomes') { 
      return 'col-md-4 ' + this.props.type; 
     } else if (this.props.type === 'expenses') { 
      return 'col-md-4 col-md-offset-1 ' + this.props.type; 
     } 
    }, 

    addRow: function() { 
     this.state.rowCount = this.state.rowCount + 1; 
     this.render(); 
    }, 

    render: function() { 
     var inputs = []; 
     for (var i=0;i<this.state.rowCount; i++) { 
      inputs.push(i); 
     } 

     console.log(inputs); 

     return (
      <div className={ this.getClassNames() }> 
       {inputs.map(function (result) { 
        return <InputRow key={result} />; 
       })} 
       <div className="row"> 
        <button onClick={this.addRow} className="btn btn-success">Add more</button>  
       </div> 
      </div> 
     ); 
    } 
}); 

Answer 1

this.render() не делает ничего. Если вы посмотрите на функцию, она просто выполняет некоторые вычисления и возвращает некоторые данные (виртуальные dom-узлы).

Вы должны использовать setState вместо прямого его изменения. Это чище и позволяет реагировать на то, что что-то изменилось.

addRow: function() { 
    this.setState({rowCount: this.state.rowCount + 1}); 
}, 

Answer 2

Не храните список компонентов в состоянии. Вместо этого сохраните подсчет строки доходов и счет строки расходов в состоянии. Используйте обработчик кликов для увеличения этих значений. Использовать метод render для генерации требуемых строк на основе подсчета.