Question

对不起，我还在学习本地反应，我想从输入中更新每个数量（数量）项的值，所以我有这种状态，

this.state={
 selectedObject={
   otherAttributes:'',
   items:[
     {name:'a',qty:''},
     {name:'b',qty:''},
   ],
  },

}

然后我有此功能来呈现TextInput，

renderPage(){
 return this.state.selectedObject.items.map(item ,i)=>
   <View style={{margin:15}}>
     <Text>Name: {item.name}</Text>
     <TextInput style={styles.input} keyboardType='numeric' maxLength={10}      
       value={?}
       onChangeText={?}
      }}/>
   </View>
  )
}

我不知道在value和onchangeText里面做什么，

这是我在TextInput中尝试过的方法

renderPage(){
  const itemqty = this.state.selectedObject.items;
  return itemqty.map((item,i)=>
    <View style={{margin:15}}>
      <Text>Name: {item.name}</Text>
      <TextInput style={styles.input} keyboardType='numeric'
         value={itemqty[i].qty}
         onChangeText={(qty)=>{
         this.setState({items[i].qty: qty});
     }}/>
  </View>
  )
}

尝试此操作后，我知道值不能像setState一样具有'[i]'。因为我正在尝试让setState值qty也会进入受尊敬的项目。

所以我期望的是我可以从输入中更改可用物料的数量值，在这种情况下，有2个物料，但以后可以是3、4、5、6个物料，每个数量并将其设置为受尊重的状态。

谢谢

Answer 1

您必须将修改后的状态属性传递给setState。

PS：我必须进行更新以反映Junius L.关于不更改组件状态的评论。

renderPage(){
  const itemqty = this.state.selectedObject.items;
  return itemqty.map((item,i)=>
    <View style={{margin:15}}>
      <Text>Name: {item.name}</Text>
      <TextInput style={styles.input} keyboardType='numeric'
        value={item.qty}
        onChangeText={(qty)=>{ 
          let newSelectedObject = {...this.state.selectedObject}; 
          newSelectedObject.items = [...newSelectedObject.items];
          newSelectedObject.items[i] = {...newSelectedObject.items[i], qty};
          this.setState({selectedObject: newSelectedObject});
        }}/>
    </View>
  )
}

此外，selectedObject是状态属性。所以正确的是

this.state={
 selectedObject:{
   otherAttributes:'',
   items:[
     {name:'a',qty:''},
     {name:'b',qty:''},
   ],
  },
}

Answer 2

通过不直接更新数组来避免状态突变。

hanldeChange = (value, index) => {
  const items = [
    ...this.state.selectedObject.items.slice(0, index),
    Object.assign({}, this.state.selectedObject.items[index], { qty: value }),
    ...this.state.selectedObject.items.slice(index + 1),
  ];

  this.setState(prevState => ({
    selectedObject: {
      ...prevState.selectedObject,
      items: items,
    },
  }));
};

在您的输入中输入

<TextInput
  style={styles.input}
  keyboardType="numeric"
  value={this.state.selectedObject.items[i].qty}
  onChangeText={qty => this.hanldeChange(qty, i)}
/>

如何从inputText更新对象内部的值

2 个答案: