Flatlist有多个textinput但状态不更新

时间:2018-06-12 12:22:21

标签: textinput react-native-flatlist

我需要询问如何将每个文本输入的状态更改为如果它们位于单独的每个项目的平面列表中。根据项目我想存储该文本的输入值。这是我的代码。这是我的代码,我需要保存数据,并希望根据项目ID更新数量。

 constructor(props) {
super(props)
this.saveData = this.saveData.bind(this);
this.UpdateValue = this.UpdateValue.bind(this);



this.state = {

  showToast: false,

  qty: 0,
  title: 'save',
  product: [],
  dataSource: [
    {
      id: 1, qty: 0, title: 'Black Hat', categoryId: 5, categoryTitle: 'MEN', price: 22, image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250,w_358,x_150/v1500465309/pexels-photo-206470_nwtgor.jpg', description: "Hello there, i'm a cool product with a heart of gold."

    },
    { id: 2, qty: 0, title: 'V Neck T-Shirt', categoryId: 2, categoryTitle: 'WOMEN', price: 12, image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250,x_226,y_54/v1500465309/pexels-photo-521197_hg8kak.jpg', description: "Hello there, i'm a cool product with a heart of gold." },
    { id: 10, qty: 0, title: 'Black Leather Hat', categoryId: 1, categoryTitle: 'KIDS', price: 2, image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,g_face,h_250,x_248/v1500465308/fashion-men-s-individuality-black-and-white-157675_wnctss.jpg', description: "Hello there, i'm a cool product with a heart of gold." },
    { id: 15, qty: 0, title: 'Long Sleeves T-Shirt', categoryId: 5, categoryTitle: 'MEN', price: 120, image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250,x_100,y_50/v1500465308/pexels-photo-500034_uvxwcq.jpg', description: "Hello there, i'm a cool product with a heart of gold." },
    { id: 11, qty: 0, title: 'Pink Diamond Watch', categoryId: 5, categoryTitle: 'MEN', price: 22, image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,h_250/v1500465308/pexels-photo-179909_ddlsmt.jpg', description: "Hello there, i'm a cool product with a heart of gold." },
    { id: 22, qty: 0, title: 'Golden Tie', categoryId: 2, categoryTitle: 'WOMEN', price: 12, image: 'http://res.cloudinary.com/atf19/image/upload/c_scale,w_300/v1500284127/pexels-photo-497848_yenhuf.jpg', description: "Hello there, i'm a cool product with a heart of gold." },
    { id: 100, qty: 0, title: 'Black Pearl Earrings', categoryId: 1, categoryTitle: 'KIDS', price: 2, image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,g_center,h_250/v1500465307/pexels-photo-262226_kbjbl3.jpg', description: "Hello there, i'm a cool product with a heart of gold." },
    { id: 215, qty: 0, title: 'Grey Blazer', categoryId: 5, categoryTitle: 'MEN', price: 120, image: 'http://res.cloudinary.com/atf19/image/upload/c_scale,w_300/v1500284127/pexels-photo-497848_yenhuf.jpg', description: "Hello there, i'm a cool product with a heart of gold." },
    { id: 12, qty: 0, title: 'Mirror Sunglasses', categoryId: 5, categoryTitle: 'MEN', price: 22, image: 'http://res.cloudinary.com/atf19/image/upload/c_crop,g_face,h_250/v1500465307/pexels-photo-488541_s0si3h.jpg', description: "Hello there, i'm a cool product with a heart of gold." },
    { id: 29, qty: 0, title: 'White Shirt', categoryId: 2, categoryTitle: 'WOMEN', price: 12, image: 'http://res.cloudinary.com/atf19/image/upload/c_scale,w_300/v1500284127/pexels-photo-497848_yenhuf.jpg', description: "Hello there, i'm a cool product with a heart of gold." },
    { id: 16, qty: 0, title: 'Tie', categoryId: 1, categoryTitle: 'KIDS', price: 2, image: 'http://res.cloudinary.com/atf19/image/upload/c_scale,w_300/v1500284127/pexels-photo-497848_yenhuf.jpg', description: "Hello there, i'm a cool product with a heart of gold." }
  ]
}

}

 async saveData(item) {
console.log("We are in Save function")
var product = [];

var items = {
  id: item.id,
  title: item.title,
  image: item.image,
  price: item.price,
  description: item.description,
  qty:  this.state.qty,
  categoryTitle: item.categoryTitle,
}


const value1 = await AsyncStorage.getItem("Cart");

if (value1 === "" || value1 === null) {
  product.push(items);
  console.log(JSON.stringify(product));
  AsyncStorage.setItem("Cart", JSON.stringify(product));
}

else if (items.qty <= 0 || items.qty == "" || items.qty == "undefined") {


  //ToastAndroid.show('please enter quantity!', ToastAndroid.SHORT);
  alert("pls enter quantity")
}

else {

  var prodsArr = JSON.parse(value1);
  for (var i = 0; i < prodsArr.length; i++) {
    var item = prodsArr[i];
    //console.log(JSON.stringify(item))
    if (item.id === items.id) {
      return (
        this.setState({


        }), alert(qty)

      )
      prodsArr.push(items)
      AsyncStorage.setItem("Cart", JSON.stringify(prodsArr))
    }
  }

  prodsArr.push(items); 
   console.log(JSON.stringify(prodsArr));
  AsyncStorage.setItem("Cart", JSON.stringify(prodsArr))
  ToastAndroid.show('item added!', ToastAndroid.SHORT);

}

}

 UpdateValue = (update) => {

this.setState({ qty: update })
this.update = update;

}

renderItem =({item,index})=&gt; {

return (

  <ListItem>
    <View>

      <Image style={{ width: 280, height: 250 }} source={{ uri: item.image }} />


      <KeyboardAvoidingView behavior="padding" style={{ flex: 1, alignItems: 'center', margin: 5 }}>

        <TextInput

          keyboardType="numeric"
          multiline={false}
          value={this.state.qty}
          onChangeText={this.UpdateValue.bind(this)}
          underlineColorAndroid="transparent" placeholder="0"
          style={{ height: 30, width: 50, borderWidth: 0.5, borderColor: 'cyan', justifyContent: 'center' }}
        />

      </KeyboardAvoidingView>

      <Button title={this.state.title} onPress={this.saveData.bind(this, item)}> </Button>

      <Button title="Cart" onPress={() => this.props.navigation.navigate('Second')} />

    </View>
  </ListItem>

);

}

render(){

return (

  <View>

    <FlatList
      data={this.state.dataSource}
      renderItem={this.renderItem.bind(this)}
      keyExtractor={(item, index) => item.id}
      keyboardShouldPersistTaps="always"
    />
  </View>
)

} };

0 个答案:

没有答案