3

Здравствуйте! Мой вопрос является очень простым и затрагивает базовую вещь - рендеринг элементов на странице. Но к моему удивлению я уже долгое время не могу найти информацию по этому вопросу.

Я использую ReactJS как фронт-энд фреймворк.

Скажем, у меня есть страничка с простейшей формой: полем, кнопкой Добавить поле и кнопкой Отправить. Внимание вопрос: как реализовать эту самую кнопку Добавить поле? При нажатии на которую - появляется еще одно текстовое поле.

Расскажу, как я пытался решить эту задачу.

class IngredientForm extends Component {
  render() {
    return(

      <form onSubmit={this.handleSubmit.bind(this)}>

        <input type="text"/>

        { this.renderOtherInputs() }

        <input type="button" value="Add Ingredient" onClick={this.addIngredient.bind(this)}>

        <input type="submit" value="Submit Form">

      </form>
    );
  }
}

Вот код для это самой формы. При нажатии на кнопку Add Ingredient должно появиться еще одно <input type="text>.

Как же это сделать? Я знаю, что основа Метеора - реактивность, поэтому прямым образом ничего рендерить не надо. Нужно опираться на некий реактивный источник данных и изменять его. А он уже будет вызывать изменения интерфейса.

В туториалах рассматривалась всего одна ситуация - у нас есть коллеккция, нужно отобразить каждый документ из коллекции. То есть реактивный источник данных - коллекция, мы ее сворачиваем в массив, а затем для каждого элемента массива отрисовываем некий интерфейс. Что ж, я решил делать аналогично, но так как количество инпутов на странице - это локальное состояние на клиенте, то хранить это в коллекции будет неправильно. у метеора есть ответ - reactive var. имеем:

numOfIngredients = new ReactiveVar([]);

Когда нажимаем на Добавить поле, то срабатывает следующий метод:

addIngredient(e) {
    e.preventDefault();
    let newNumOfIngredients = numOfIngredients.get();
    newNumOfIngredients.push('no matter');
    numOfIngredients.set(newNumOfIngredients);
}

Ну и метод для рендеринга, оснванного на нашем реактивном массиве:

renderOtherInputs() {
  return numOfIngredients.get().map((elem) => {
    return(
      <input type="text"/>
    );
  }
}

Но код не работает. Я прописал в методе addIngredient console.log(numOfIngredients.get()) и при нажатии на кнопку добавления поля в консоль выводилось правильное поведение:

['no matter']
['no matter','no matter']
['no matter','no matter','no matter']
...

Тем не менее поле не появляется. Я пробовал и с createContainer делать, объявляя numOfIngredients = new ReactiveVar([]); там, а затем обращаясь к нему как this.props.numOfIngredients.get(). Массив заполняется, в консоль выводится, инпуты не появляются. Возможно мое решение по своей сути является неправильным и костыльным.

вопрос на анлийском

Очень надеюсь на помощь сообщества, тем более что вопрос у меня элементарный, как мне представляется. Заранее спасибо за ваши ответы !

1 ответ 1

1

Задача была решена.

Итак. Абсолютно правильным было предположение, что реактивность - ключ к решению задачи. Но чья реактивность? Я наивно предположил, что метеора, а потому воспользовался его инструментом Reactive Var. И здесь кроется ошибка! ReactJS имеет собственное средство для осуществления реактивных изменений и (судя по всему) с Reactive Var'ами и ReactiveDict'ами совсем не дружит.

Нужно использовать state компонента React. State является по сути объектом, поэтому назовем поле как нам вздумается и будем хранить нужный нам тип данных, в нашем случае = массив. Задавать начальное значение state нужно в конструкторе класса компонента:

constructor(props) {
  super(props);
  this.state = {
    inputs: [],
  }
}

Мы задали поле Inputs, которое на момент отрисовки компонента будет являться пустым массивом.

Теперь напишем функцию отрисовки дополнительных инпутов, полагаясь на state.inputs:

renderOtherInputs() {
  return this.state.inputs.map( (each, index) => {
    return (
      <input key={ index } type="text" />
    );
  });
}

И напишем функцию для добавления нового поля. Чтобы при добавлении нового элемента в массив сразу отрисовывался новый инпут на экране, нам нужно взаимодействовать с state.inputs не напрямую, а с помощью функции setState, которая и обеспечивает реактивность:

addInput(e) {
  e.preventDefault();
  var temp = this.state.inputs;
  temp.push('no matter');
  this.setState({
    inputs: temp,
  });
}

Готово!

п.с. я прям расстроен, что не получил ответ. Не в готовом виде, а хотя бы наводку односложную: state. Во всех доках читал, что метеор, а уж react в особенности, на stackoverflow имеют огромное комьюнити.. и вот тебе, с элементарным вопросом помочь лень

п.с.2. я еще пол вечера бился и написал функцию для удаления конкретного инпута:

deleteIngredient(e) {
  e.preventDefault();
  let index = e.target.getAttribute('id');
  let temp = this.state.inputs;
  delete temp[index];
  this.setState({
    inputs: temp,
  });
}

Знаю, что delete создает дырку в массиве, но с помощью temp.splice(index,1) не работает. Инпут удаляется, но всегда только последний снизу. При том что в массиве удаляется нужный элемент.

Рядом с инпутом соответственно нужна кнопка с onClick= {this.deleteIngredient.bind(this)}

п.с.3 самому разобраться конечно приятно:) и надеюсь хоть кому-то помог

Ваш ответ

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

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