0

Здравствуйте. Есть две кнопки. В зависимости от того, на какую кнопку я нажал, рендерятся текстовые поля с данными.

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>, чтоб код работал корректно, то есть: отрендерил нужные данные, внес в них изменения, если нужно отрендерил другие. Спасибо за помощь.

2
  • 2
    А зачем вы в inputs толкаете строку, если предполагается что там будет массив? Да, нестрогая типизация и не такие непотребства позволяет творить, но хорошего в этом мало. Я ReactJS не изучал, поэтому полностью код осознать не смог, но всё же: если вам в inputs нужно поместить всего одно значение, то помещайте его как массив из одного элемента. А если вы по-прежнему хотите толкать в эту переменную всё подряд, то тогда используйте только методы, доступные всем возможным объектам.
    – Regent
    Commented 21 нояб. 2015 в 13:27
  • А что именно вы пытаетесь сделать в _changeValue. По-моему это бред. Commented 25 нояб. 2015 в 10:58

2 ответа 2

1

Сделать разные состояния для разных данных

2
  • Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение? Commented 24 авг. 2016 в 5:11
  • Не понятная задача. Зачем рендерить инпуты, при вводе в которые они сразу пропадут, т.к. состояние данных меняется. Даже если сделать проверку чтобы мап не перебирал строку скорее всего все инпуты пропадут после изменение одного символа. Думаю нужно брать одно состояние для инпутов, другое для строки. При onChange записывать новое состояние строки и делать с ним уже что хочешь.
    – eavam
    Commented 25 авг. 2016 в 13:29
-1

Вам следует внести следующие изменения:

_changeValue: function (i, e) {
    var val = e.target.value;
    var newInputs = $.extend(true, [], this.state.inputs);
    newInputs[i] = val;
    this.setState({
        inputs: newInputs
    });
 },

 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, i)} />
        }.bind(this));
    }
},

Обратите внимание на onChange={this._changeValue.bind(this, i)}. Здесь привязывается индекс к вызову. А в обработчике параметр i уже используете по назначению. Здесь я использовал копирование массива с помощью $.extend для того чтобы не вносить изменения в state на прямую, так как оно может быть параллельно перезаписано другим вызовом setState. Вместо $.extend вы можете использовать другие инструменты глубокого копирования, если в проекте не присутствует jQuery.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.