Question

我有无限的输入，我无法统计所有这些。我想通过按下按钮更改这些值，但我无法为所有这些设置状态，因为这些可能超过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};

我该如何解决这个问题？这是一个移动商店应用程序。

如何使用Id或Attribute更改TextInput值？

0 个答案: