Question

I am running sample project. I want to display the increment and decrement values. In my project increment and decrement values are not displayed. How to change the values in text.

Here is my code:

constructor(props){
      super(props);
      this.state={
         increment:0,
         decrement:1
    }
    }
  incrementFunc(){
        var countIncrement = this.state.increment
        this.setState({
          increment : countIncrement + 1
        },()=>{
          alert(this.state.increment)
        })
      }
      decrementFunc(){

            var countDecrement = this.state.increment

        this.setState({
          decrement : countDecrement- 1,

        },()=>{
          alert(this.state.decrement)
        })
      }

<View style={styles.arrowsView}>
          <TouchableOpacity onPress ={this.incrementFunc.bind(this)}>
          <Image style={styles.arrowStyle} source={require('@images/up-arrow.png')} />
          </TouchableOpacity>
          </View>
          <View style={styles.numberView}>
          <Text style={{fontSize:15, color:'black'}}>{this.state.increment}
          </Text>
          </View>
          <View style={styles.arrowsView}>
          <TouchableOpacity onPress ={this.decrementFunc.bind(this)}>
          <Image style={styles.arrowStyle} source={require('@images/down-arrow.png')} />
          </TouchableOpacity>
          </View>
here is my screenshot:

Please give any suggestion. Thank You

Answer 1

这是我在我的项目中做出的解决方案，我做了什么

首先 - ＆gt;创建了另一个组件，它将帮助我们在列表元素中包含数量输入功能
其次 - ＆gt;此组件需要由列表renderRow中的父组件调用，以使该组件在所有行中可见。并将此QuantityInput组件类放在要使用它的同一文件中...
第三 - ＆gt;运行你的应用程序，看起来像这样......

查看附件中的文件......

/*Use this component in yours parent view inside list to have a Quantity Input inside list , I have used native base as well if some thing gets miss please have native base in yours project...*/
{<QuantityInput item={this.state.data[rowID]} viewAddToCart={false} />}


/* QuantityInput */
class QuantityInput extends React.Component {
  userProductQty = Array.apply(null, Array(this.props.item.length)).map(Number.prototype.valueOf, 1);
  itemPosition = -1;

  constructor(props) {
    super(props);
    this.state = {
      viewAddToCart: this.props.viewAddToCart,
      item: this.props.item,
      style: { flex: 1 },
      styleTextInput: { backgroundColor: '#ffffff' },
      styleButton: { backgroundColor: '#000000' },
      styleImage: { width: 12, height: 12 },
      editable: true,
      stepsize: 1,
      initialValue: 1,
      min: 1,
      max: 100
    }
  }
  upBtnPressed = (dataSource, fieldName) => {
    if (dataSource.userQty < this.state.max) {
      let value = (parseInt(dataSource.userQty) + parseInt(this.state.stepsize)).toString();
      dataSource.userQty = value;
      this.setState({
        item: dataSource
      });
    }
  }

  downBtnPressed = (dataSource, fieldName, props) => {
    if (dataSource.userQty < this.state.min) {
      let value = (parseInt(dataSource.userQty) - parseInt(this.state.stepsize)).toString();
      dataSource.userQty = value;
      this.setState({
        item: dataSource
      });
    }
  }

  onChangeText = (text, item, fieldName, itemPosition) => {
    if (!isNaN(text)) {
      item.userQty = text.toString();
      this.setState({
        item: item
      });
    } else {
      item.userQty = 0;
      this.setState({
        item: item
      });
    }
  }

  render() {
    return (
      this.state.viewAddToCart ?
        /* Add to cart */
        <View style={[{ flexDirection: 'row' }]}>
          <Left style={{ flex: 0 }}>
            <Button rounded danger
              title="Add"
              color="white"
              style={[{ width: 70 }, { height: 30 }, { justifyContent: 'center' }]}
              onPress={() => { this.props.onAddToCart(this.state.item); this.setState({ viewAddToCart: false }) }}
            >
              <Text style={[{ color: 'white' }]}>{string.addToCart}</Text>
            </Button>
            {/*</TouchableOpacity>*/}
          </Left>
        </View>
        :
        /* Quantity Text */
        <View style={{ flexDirection: 'row' }}>
          <View style={stylesQuantityText.verticle}>
            <TouchableOpacity style={[styles.button, styles.transparentBkg, { backgroundColor: '#d9534f' }, { paddingLeft: 10 }, { borderTopLeftRadius: 5 }, { borderBottomLeftRadius: 5 }, { justifyContent: 'center' }, { alignItems: 'center' }]} onPress={() => { this.downBtnPressed(this.state.item, this.state.item.productId); }} >
              <Text style={[{ width: 20 }, { height: 26 }, { fontSize: 21 }, { alignSelf: 'center' }, { paddingBottom: 10 }, { fontWeight: 'bold' }]}>-</Text>
              {/*<Icon name={"remove"} />*/}
            </TouchableOpacity>
            <TextInput
              style={[stylesQuantityText.textinput, this.state.styleTextInput]}
              editable={this.state.editable}
              keyboardType={'numeric'}
              text={this.state.item.userQty.toString()}
              value={this.state.item.userQty.toString()}
              ref={"Qty" + this.state.item.productId}
              key={"Qty" + this.state.item.productId}
              onChangeText={(text) => { this.onChangeText(text, this.state.item, this.state.item.productId); this.props.onAddToCart(this.state.item); }} />

            <TouchableOpacity style={[styles.button, styles.transparentBkg, { backgroundColor: '#d9534f' }, { paddingLeft: 10 }, { borderTopRightRadius: 5 }, { borderBottomRightRadius: 5 }]} onPress={() => { this.upBtnPressed(this.state.item, this.state.item.productId); this.props.onAddToCart(this.props.item); }}>
              {/*<Icon name={"add"}
                size={27} />*/}
              <Text style={[{ width: 20 }, { height: 26 }, { fontSize: 19 }, { alignSelf: 'center' }]}>+</Text>
            </TouchableOpacity>
          </View>
        </View>

    );
  }
}

const stylesQuantityText = StyleSheet.create({
  wrapper: {
    flex: 1,
    backgroundColor: '#eeeeee'
  },
  verticle: {
    flexDirection: 'row',
    paddingLeft: 0,
    paddingRight: 0,

  },
  horizontal: {
    flexDirection: 'row'
  },
  textinput: {
    backgroundColor: '#eeeeee',
    textAlign: 'center',
    width: 30,
    borderColor: 'black',
    borderWidth: 1,
    height: 26
  },
  button: {
    backgroundColor: '#dedede',
    padding: 5
  },
  image: {
    width: 18,
    height: 18
  },
  buttonText: {
    alignSelf: 'center'
  }

});

] 1

Increment and Decrement quantity in ListView using react-native

1 个答案: