Question

我想要实现的是Array这样的

infos = [{type: 'phone', val: '2222222'}
           {type: 'email', val: 'abc@abc.com'}]

以下是state

constructor(props) {
super(props);
this.state = {
  rows: [], //this is used for the add component 
  contactDetails: [{type: '', val: ''}], // where i will add the values 
};
}

所以我有两个TextInput

<View>
  <TextInput label='Type'/>
  <TextInput label='Details'/>
</View>

单击按钮时可以动态添加此View，也可以删除。这是我的添加和删除按钮的代码：

addRow(){
 this.state.rows.push(index++)
 this.setState({ rows: this.state.rows })
}

deleteRow(key){
 this.state.rows.splice(key, 1)
 this.setState({ rows: this.state.rows })
}

<TouchableOpacity onPress={ this.addRow.bind(this) } >
   <Text style={{textAlign: 'center',}}>Add</Text>
</TouchableOpacity>

 ...

 <TouchableOpacity  onPress={ () => this.deleteRow(i) } >
   <Image source={require('./../img/delete.png')} style={{width:32, height: 32 }} />
 </TouchableOpacity>

如何正确获取其值并将其添加到Array？谢谢。

更新

在TextInput我试过这个

<TextInput 
                    onChangeText={(text)=>{
                      let cd = this.state.contactDetails;
                      cd[i].val = text ;
                      this.setState({cd});

                    }}
                    value={this.state.contactDetails[i]}
                    label='Details' 
                    />

但我总是遇到错误undefined is not an object (evaluating 'cd[i].val = text')

Answer 1

您无法通过声明this.state.rows.push(index++)来操纵状态，但您必须使用concat()执行此操作并将值返回到新变量。例如（我实际上并不知道 index 代表你的情况，但让我们试一试：

addRow() {
 const rows = this.state.rows.concat(index++)
 this.setState({rows})
}

以下是我认为您正在尝试实现的一个工作示例：https://snack.expo.io/HySVtag6g

Answer 2

在我的状态下，我添加了一个像这样的数组

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='form-control classmanufacturer' name="" id='id_manufacturer'>
        <option value="">Manufacturer *</option>
        <option value="Apple">Apple</option>
        <option value="Samsung">Samsung</option>
</select>
<select class='form-control classmodelName' name="" id="id_modelName">
        <option value="">Model *</option>
        <option value="Iphone" >Iphone</option>
        <option value="Note" >Note</option>
</select>
<select class='form-control classpartName' name="" id='id_partName' >
        <option value="">Part *</option>
        <option value="IC" >IC</option>
        <option value="LED">LED</option>
</select>
<input type="text" name='' id="id_quantity" class="form-control classquantity" pattern="^[0-9]{1,}$" maxlength="11" placeholder="Quantity *"/>
<input type="text" name='' id="id_costPerUnit" class="form-control classcostPerUnit" pattern="^[0-9]{1,}$" maxlength="11" placeholder="Price *"/>

<button type="button" class="btn btn-default add-row a addbtn"  onclick="add()" disabled='disabled' style="padding:10px 65px;">Add</button>

然后我将其添加到我的info: { type: '', val: '', }

addRow

每次单击添加按钮时，带有空值的addRow(){ //add new array in contactDetails var arrayvar = this.state.contactDetails.slice() arrayvar.push(this.state.info) this.setState({ contactDetails: arrayvar }) //add new component row this.state.rows.push(index++); this.setState({ rows: this.state.rows}); }命名信息将添加到Array，然后我更新添加的数组的值。

如何更新数组 - ReactNative

2 个答案: