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

Question

对不起，我还在学习本机反应，我想从输入中更新每个 qty(quantity) 项目的值，所以我有这个状态，

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>
  )
}

尝试此操作后，我知道 value 不能像 setState 一样具有 '[i]'。因为我试图让值 qty 在 setState 时也会转到受尊重的项目 qty。

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

谢谢

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)}
/>