Как изменить значение TextInput с помощью идентификатора или атрибута?

У меня неограниченное количество входов, и я не могу их всех сосчитать. Я хочу изменить их значение, нажимая кнопки, но я не могу установить состояние для всех из них, потому что это может быть более 1000 входов или меньше 10.

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

import React, { Component } from 'react';
import { StyleSheet, View, ToastAndroid } from 'react-native';
import { Content, List, ListItem, Thumbnail, Text, Body, Right, Left, Button, Icon, Input } from 'native-base';
let basket = [];
let Numberr = 0;
let ProductCount = [];
class MyAppList extends Component<Props> {
  constructor(props){
    super(props);
    this.state = {
      quantity:'0'
    }
  }

  UserOrderBasket = (ProductId,InputId)=>{
    document,getElementById(InputId).value=Numberr;
    Numberr++;
  }

  render() {
    return (
        <Content>
        <View style = {{ flex:1, flexDirection: 'row' }}>
           <Button primary style = {styles.fakeButtons1} onPress = {()=>this.props.navigation.navigate('MainPage')}>
             <Icon name='arrow-back' />
           </Button>
           <Button primary style = {styles.fakeButtons2} onPress = {()=>this.props.navigation.navigate('Cart',{ORDERS:basket})}>
              <Icon name = "cart" style = {{color:'#fff'}} />
           </Button>
        </View>
          <List>

            <ListItem>
              <Left>
                 <Body style = {{ flex:1, flexDirection: 'row' }}>
                    <Button icon transparent  style = {{width:36,padding:0}}>
                       <Left>
                         <Icon type = "FontAwesome" name = "minus-circle" style = {{fontSize:40,color:'blue'}}/>
                       </Left>
                    </Button>
                    <Input 
                       id = "input-1"
                       value = "0"
                    />
                    <Button icon transparent style = {{width:36,padding:0}} onPress = {this.UserOrderBasket.bind(this,1,'input-1')}>
                       <Left>
                          <Icon type = "FontAwesome" name='plus-circle' style = {{fontSize:40,color:'blue'}}/>
                       </Left>
                    </Button>
                 </Body>
              </Left>
              <Body>
                <Text>گوشت گوسفندی</Text>
                <Text note>توضیحات کوتاه در باره محصول ... </Text>
              </Body>
              <Thumbnail square size = {50} source = {{ uri: 'http://192.168.1.102/studioaleph/img/image-15-630x825.jpg' }} />
            </ListItem>

            <ListItem>
              <Left>
                 <Body style = {{ flex:1, flexDirection: 'row' }}>
                    <Button icon transparent  style = {{width:36,padding:0}}>
                       <Left>
                         <Icon type = "FontAwesome" name = "minus-circle" style = {{fontSize:40,color:'blue'}}/>
                       </Left>
                    </Button>
                    <Input 
                       id = "input-2"
                       value = "0"
                    />
                    <Button icon transparent style = {{width:36,padding:0}} onPress = {this.UserOrderBasket.bind(this,1,'input-1')}>
                       <Left>
                          <Icon type = "FontAwesome" name='plus-circle' style = {{fontSize:40,color:'blue'}}/>
                       </Left>
                    </Button>
                 </Body>
              </Left>
              <Body>
                <Text>گوشت گوسفندی</Text>
                <Text note>توضیحات کوتاه در باره محصول ... </Text>
              </Body>
              <Thumbnail square size = {50} source = {{ uri: 'http://192.168.1.102/studioaleph/img/image-15-630x825.jpg' }} />
            </ListItem>

            <ListItem>
              <Left>
                 <Body style = {{ flex:1, flexDirection: 'row' }}>
                    <Button icon transparent  style = {{width:36,padding:0}}>
                       <Left>
                         <Icon type = "FontAwesome" name = "minus-circle" style = {{fontSize:40,color:'blue'}}/>
                       </Left>
                    </Button>
                    <Input 
                       id = "input-3"
                       value = "0"
                    />
                    <Button icon transparent style = {{width:36,padding:0}} onPress = {this.UserOrderBasket.bind(this,1,'input-1')}>
                       <Left>
                          <Icon type = "FontAwesome" name='plus-circle' style = {{fontSize:40,color:'blue'}}/>
                       </Left>
                    </Button>
                 </Body>
              </Left>
              <Body>
                <Text>گوشت گوسفندی</Text>
                <Text note>توضیحات کوتاه در باره محصول ... </Text>
              </Body>
              <Thumbnail square size = {50} source = {{ uri: 'http://192.168.1.102/studioaleph/img/image-15-630x825.jpg' }} />
            </ListItem>
            .
            .
            .
            .
            .
            .
            .
            .
            .
            .
            .
            .
            .
            .
            .
            .
            <ListItem>
              <Left>
                 <Body style = {{ flex:1, flexDirection: 'row' }}>
                    <Button icon transparent  style = {{width:36,padding:0}}>
                       <Left>
                         <Icon type = "FontAwesome" name = "minus-circle" style = {{fontSize:40,color:'blue'}}/>
                       </Left>
                    </Button>
                    <Input 
                       id = "input-300"
                       value = "0"
                    />
                    <Button icon transparent style = {{width:36,padding:0}} onPress = {this.UserOrderBasket.bind(this,1,'input-1')}>
                       <Left>
                          <Icon type = "FontAwesome" name='plus-circle' style = {{fontSize:40,color:'blue'}}/>
                       </Left>
                    </Button>
                 </Body>
              </Left>
              <Body>
                <Text>گوشت گوسفندی</Text>
                <Text note>توضیحات کوتاه در باره محصول ... </Text>
              </Body>
              <Thumbnail square size = {50} source = {{ uri: 'http://192.168.1.102/studioaleph/img/image-15-630x825.jpg' }} />
            </ListItem>

          </List>
        </Content>
    );
  }
}

const styles = StyleSheet.create({
  ListTextB:{
    fontSize:16,
    fontFamily:'IRANSans',
    paddingTop:5,
    textAlign:'right'
  },
  fakeButtons1:{
    width:'50%',
    borderRadius:0,
    alignItems: 'center',
  },
  fakeButtons2:{
    width:'50%',
    borderRadius:0,
    justifyContent: 'flex-end'
  },
  shoppingButtons:{
    borderRadius:50,
    padding:5
  },
  shoppingText:
  {
    fontSize:18,
    textAlign:'center',
    padding:0,
    backgroundColor:'#fff'
  }
});

export {MyAppList};

Как я могу решить эту проблему? Это приложение для мобильного магазина.

Вы можете сделать это, сделав custom component и обновив его state на основе id, ознакомьтесь с аналогичным объяснением здесь

— 02.05.2018 07:57

javascript react-native

02.05.2018 07:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

301

Другие вопросы по теме

Как взаимодействовать между двумя независимыми компонентами в React js 16.x версии

Реагируйте на собственные пробелы между ними при добавлении навигаторов

Отправка не является функциональной ошибкой

Textinput (React Native - Android) - Поддержка onKeyPreIme

Возникла проблема с рендерингом с React-Native Animation

Доступ к массиву объектов Json в React-Native

React Native с Typescript 2.8 - невозможно повторно объявить блочную переменную console

Webview onNavigationStateChange возвращает URL-адрес предыдущей страницы

React Native + TypeScript + асинхронный

Как создать прокрутку для Android с помощью React Native?

Как изменить значение TextInput с помощью идентификатора или атрибута?

Другие вопросы по теме

Похожие вопросы