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 самому разобраться конечно приятно:) и надеюсь хоть кому-то помог

Ваш ответ

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

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