React native 在平面列表问题中使用TextInput的动态表单
实际行为: 我正在一个平面列表中加载一个动态表单,我应该根据一个条件添加几行文本输入。例如,我有一个复选框。当我选中复选框时,我必须添加一个下拉列表和两个文本输入,当我取消选中复选框时,我必须删除这三个。我的问题是,当我选中复选框并在TextInputs中输入一些值并取消选中复选框时,最后一个TextInput中的值将被分配给与这些条件无关的另一个TextInput 预期行为: 不应将最后一个TextInput值分配给与取消选中复选框时的复选框条件无关的另一个TextInput 以下是我的文本输入代码:React native 在平面列表问题中使用TextInput的动态表单,react-native,react-native-flatlist,textinput,React Native,React Native Flatlist,Textinput,实际行为: 我正在一个平面列表中加载一个动态表单,我应该根据一个条件添加几行文本输入。例如,我有一个复选框。当我选中复选框时,我必须添加一个下拉列表和两个文本输入,当我取消选中复选框时,我必须删除这三个。我的问题是,当我选中复选框并在TextInputs中输入一些值并取消选中复选框时,最后一个TextInput中的值将被分配给与这些条件无关的另一个TextInput 预期行为: 不应将最后一个TextInput值分配给与取消选中复选框时的复选框条件无关的另一个TextInput 以下是我的文本输
_onChangeText(e, item, index) {
console.log("abc123 ", item);
let count = "false";
let note;
if (this.state.inputsValues.length === 0 && item.blocks.question !== undefined) {
if (item.blocks.question.prompt !== "Notes") {
note = {
note: e.nativeEvent.text.replace(/\n/g, ''),
id: item.blocks.question.prompt
};
} else {
note = {
note: e.nativeEvent.text.replace(/\n/g, ''),
id: item.blocks.block_pos
};
}
this.setState({ inputsValues: [...this.state.inputsValues, note] }, () => {
console.log("length === 0", this.state.inputsValues);
});
} else {
this.state.inputsValues.map((res, idx) => {
if (item.blocks.question !== undefined && res.id === item.blocks.question.prompt) {
res.note = e.nativeEvent.text.replace(/\n/g, '');
count = "true";
}
});
if (count === "false") {
if (item.blocks.question.prompt !== "Notes") {
note = {
note: e.nativeEvent.text.replace(/\n/g, ''),
id: item.blocks.question.prompt
};
} else {
note = {
note: e.nativeEvent.text.replace(/\n/g, ''),
id: item.blocks.block_pos
};
}
this.setState({ inputsValues: [...this.state.inputsValues, note] }, () => {
// console.log("gvrtgrtgt", this.state.inputsValues);
});
}
}
}
<NBTextField
itemStyles={[styles.itemStyles, { height: width / 6 }]}
value={inputsValues[index] !== undefined && inputsValues[index].note}
onEndEditing={e => this._onChangeText(e, item)}
onChangeText={this.getInputValue}
onSubmitEditing={() => Keyboard.dismiss()}
inputStyles={[styles.inputStyles, { height: width / 6 }]}
placeholder="Enter here"
/>
\n更改文本(e、项目、索引){
控制台日志(“abc123”,项目);
让count=“false”;
请注意;
if(this.state.inputsValues.length==0&&item.blocks.question!==未定义){
如果(item.blocks.question.prompt!=“Notes”){
注={
注意:e.nativeEvent.text.replace(/\n/g',),
id:item.blocks.question.prompt
};
}否则{
注={
注意:e.nativeEvent.text.replace(/\n/g',),
id:item.blocks.block_pos
};
}
this.setState({inputsValues:[…this.state.inputsValues,note]},()=>{
log(“长度===0”,this.state.inputsValues);
});
}否则{
this.state.inputsValues.map((res,idx)=>{
if(item.blocks.question!==未定义和&res.id===item.blocks.question.prompt){
res.note=e.nativeEvent.text.replace(/\n/g');
count=“true”;
}
});
如果(计数=“假”){
如果(item.blocks.question.prompt!=“Notes”){
注={
注意:e.nativeEvent.text.replace(/\n/g',),
id:item.blocks.question.prompt
};
}否则{
注={
注意:e.nativeEvent.text.replace(/\n/g',),
id:item.blocks.block_pos
};
}
this.setState({inputsValues:[…this.state.inputsValues,note]},()=>{
//log(“gvrtgtgt”,this.state.inputsValues);
});
}
}
}
这个。_onChangeText(e,item)}
onChangeText={this.getInputValue}
onSubmitEditing={()=>Keyboard.dismise()}
inputStyles={[styles.inputStyles,{高度:宽度/6}]}
占位符=“在此处输入”
/>
环境:
反应本机:0.61.1
截图:
以下代码适用于我的情况
_onChangeText(e, item, index) {
if (item.blocks.block_type === 'question') {
this.state.mainData[index].answer = e.nativeEvent.text;
this.setState({
mainData: this.state.mainData,
});
}
}
<NBTextField
itemStyles={styles.itemStyles}
value={item.answer}
onEndEditing={e => this._onChangeText(e, item, index)}
onChangeText={e => this.getInputValue(e, item, index)}
onSubmitEditing={() => Keyboard.dismiss()}
inputStyles={styles.inputStyles}
/>
\n更改文本(e、项目、索引){
如果(item.blocks.block_type==='question'){
this.state.mainData[index].answer=e.nativeEvent.text;
这是我的国家({
mainData:this.state.mainData,
});
}
}
这个。\ onChangeText(e,item,index)}
onChangeText={e=>this.getInputValue(e,项,索引)}
onSubmitEditing={()=>Keyboard.dismise()}
inputStyles={styles.inputStyles}
/>