Блог

Главная - Вопросы по программированию - Как добавить динамические входные значения в локальное состояние для извлечения

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

#javascript #reactjs #react-native #multidimensional-array #react-state-management

#javascript #reactjs #react-native #многомерный массив #реагирование-управление состоянием

Вопрос:

У меня есть собственная форма React, которая позволяет мне добавлять 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. При первом взгляде на вашу изолированную среду кода я не смог ввести данные в поля ввода. Не могли бы вы воссоздать вашу проблему во фрагменте кода, чтобы мы могли помочь вам и будущим пользователям с подобной проблемой?

2. Привет, @larz, спасибо за это, я обновил изолированную среду, чтобы на первый взгляд входные данные можно было редактировать.

Ответ №1:

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

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

 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}
                  />
                );
              })}