React native 映射React Native时更新输入值

我正在创建

react native mobile

app。我有一个带有一些值的数组。我想将数组的值设置到输入字段中。我在字段中添加了值，但无法更新这些值。我在qty变量中设置了如下值：

constructor(props) {
  super(props);
  this.state = {
    qty:[],
  }
}

componentWillMount() {
  var ids = [];
  this.props.data.map((dataImage,Index) => {
    dataImage['pro-name'] != undefined && (
      ids.push({'qty':dataImage['pro-qty']})    
    )
  })

  this.setState({qty:ids})
}

render() {
  return {
    this.props.data.map((dataImage,Index)=>(
      <View key={Index} style={productStyle.cartview}>
        {dataImage['pro-name'] && (
          <View style={productStyle.cartmain}>
            <Input value={this.state.qty[Index]['qty']} onChange={this.handleChangeInput.bind(this)} style={{width:40,height:40,textAlign:'left'}} />
          </View>
        )}
      </View>
    ))
  }
}

构造函数（道具）{
超级（道具）；
此.state={
数量：[]，
}
}
组件willmount（）{
var-id=[]；
this.props.data.map（（dataImage，Index）=>{
dataImage['pro-name']！=未定义&&(
推送（{'qty'：dataImage['pro-qty']}）
)
})
this.setState（{qty:ids}）
}
render（）{
返回{
this.props.data.map（（dataImage，Index）=>(
{dataImage['pro-name']&&(
)}
))
}
}

---

它将值正确地显示在输入字段中，但我无法在字段中键入任何内容来更新值。对此，我能做些什么？

我建议您将输入容器移动到单独的类中，采用更好的方法，每个组件将处理自己的状态。它易于操作，也会带来更好的性能

components = []

render() {
  return this.props.data.map((item, index) => (
    <CustomComponent data={item} index={index} ref={(ref) => this.components[index] = ref} />
  ))
}

您需要在CustomComponent类中创建这些函数（

getValue

&

setValue

）

解决方案 这是您的问题的解决方案。您需要安装

lodash

或找到其他解决方案来制作新副本

qty

<Input onChangeText={(text) => this.handleChangeText(text, index)} />

handleChangeText = (text, index) => {
  const qty = _.cloneDeep(this.state.qty);
  qty[index] = {
    qty: text
  }
  this.setState({qty})
}

this.handleChangeText（文本，索引）}/>
handleChangeText=（文本，索引）=>{
常量数量=uu.cloneDeep（此.state.qty）；
数量[索引]={
数量：文本
}
此.setState（{qty}）
}

您输入的值设置为

此.state.qty[索引]['qty']

。要在文本编辑时更改它，您可以这样做。您不需要绑定函数，而是使用如下箭头函数

onChangeText={ (newValue) => {
    this.setState({ <your-input-value-state>:newValue })
}}

onChangeText={（newValue）=>{
this.setState（{:newValue}）
}}

您必须在

onChange

事件上分别更新每个

输入的值

将您的输入替换为
输入

<Input value={this.state.qty[Index]['qty']}
       onChange={this.handleChangeInput.bind(this, Index)}
       style={{width:40,height:40,textAlign:'left'}}
/>

您的代码中没有定义
handleChangeInput
函数。handleChangeInput（stateName，text）{this.setState（{[stateName]：text}）}我也使用了它，但不起作用，实际上我只想更新输入字段中显示的值。我的数组正确插入字段中的所有值，但无法更新。这不是一个完整的解决方案，只是一个示例。您需要根据需要对其进行修改。
<Input value={this.state.qty[Index]['qty']}
       onChange={this.handleChangeInput.bind(this, Index)}
       style={{width:40,height:40,textAlign:'left'}}
/>

handleChangeInput(index, value){
    let {qty} = this.state;
    let qty_update = qty.slice();
    qty_update[index]['qty']  = value;
    this.setState({qty: qty_update});
}