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
    21 ноя 2015 в 13:27
  • А что именно вы пытаетесь сделать в _changeValue. По-моему это бред. 25 ноя 2015 в 10:58

2 ответа 2

1

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

2
  • Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение? 24 авг 2016 в 5:11
  • Не понятная задача. Зачем рендерить инпуты, при вводе в которые они сразу пропадут, т.к. состояние данных меняется. Даже если сделать проверку чтобы мап не перебирал строку скорее всего все инпуты пропадут после изменение одного символа. Думаю нужно брать одно состояние для инпутов, другое для строки. При onChange записывать новое состояние строки и делать с ним уже что хочешь.
    – DarkSir
    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.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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