Как добавить динамические входные значения в локальное состояние для поиска - PullRequest
Новая
       26

Как добавить динамические входные значения в локальное состояние для поиска

0 голосов
/ 14 апреля 2019

У меня есть форма React Native, которая позволяет мне добавить Input пользовательский интерфейс в форму, нажав кнопку с этой функцией. Это позволяет мне генерировать это на лету. Код для этого таков. 

addClick() {
    this.setState(prevState => ({ values: [...prevState.values, ""] }));
    console.log(this.values[0].name);
}

Эта часть работает хорошо, но у меня проблема с извлечением данных из динамических входов и добавлением их в массив. Пока я пробовал это 

setVal = value => {
    const values = this.state.values[0];
    if (values[0].name === "" || values[0].description === "") return;

    [...this.state.values, value];

    this.setState(values);
    console.log(values);
};

Как правильно организовать свои состояния, чтобы я мог добавить столько входов, сколько мне нужно, и когда я закончу, я смогу обновить состояние и получить доступ к новым данным в моем компоненте списка?

Как мне обновить свое состояние до нового массива? на данный момент this.state показывает только начальное состояние, установленное сверху.

Мне не хватает нескольких вещей

Пожалуйста, посмотрите на песочницу с полным кодом ЗДЕСЬ , чтобы вы могли увидеть:

1 Ответ

0 голосов
/ 14 апреля 2019

Понимаете ... ваш созданный вопрос не так очевиден, нам нужно увидеть, где вы вызываете функцию setVal (), но ....

Я думаю, вам будет удобнее, если вы визуализируете свой <input/>s прямо из вашего массива состояний, а не из const x = [] варианта.потому что кажется, что вам нужен динамический просмотр, и в таких случаях вам нужно будет привязать количество циклов из состояния.Итак: 

this.state = {
  x: [0,1,2,3,4]
}

и внутри вашего рендера: 

   {this.state.x.map(x => {
                return (
                  <TextInput
                    placeholder={`name${x}`}
                    value={values[x.toString()]}
                    handleBlur={() => handleBlur(x.toString())}
                    onChangeText={handleChange(x.toString())}
                    style={styles.input}
                  />
                );
              })}
...