Здравствуйте.
Есть две кнопки. В зависимости от того, на какую кнопку я нажал, рендерятся текстовые поля с данными.
var Data = [1, 2, 3];
var Test = ['Vasya', 'Kate', 'TEst'];
var Main = React.createClass({
getInitialState: function () {
return {
inputs: null
}
},
_getData: function () {
this.setState({
inputs: Data
});
},
_getTest: function () {
this.setState({
inputs: Test
});
},
createBtnData: function () {
return <button onClick={this._getData}>Get Data</button>;
},
createBtnTest: function () {
return <button onClick={this._getTest}>Get Test</button>;
},
_changeValue: function (e) {
var val = e.target.value;
this.setState({
inputs: val
});
},
createInput: function () {
if (this.state.inputs) {
return this.state.inputs.map(function (item, i) {
return <input key={i} value={item} onChange={this._changeValue} />
}.bind(this));
}
},
render: function() {
return <div>
{this.createBtnData()}
{this.createBtnTest()}
{this.createInput()}
</div>;
}
});
Проблема в том, что когда я кликаю на одно из полей и пытаюсь ввести текст, то вызывается следующая ошибка:
TypeError: this.state.inputs.map is not a function
Я тако понимаю, что проблема в том, что метод map снова пытается вызваться для данных, которые я ввожу, и так как это уже не массив, а строка, то отсюда и ошибка.
Вопрос: как в данном случае мне правильно повесить обработчик onChange на input, чтоб код работал корректно, то есть: отрендерил нужные данные, внес в них изменения, если нужно отрендерил другие.
Спасибо за помощь.
