我是React的新手，正在尝试构建动态表单。它似乎工作得很好。问题是，当我键入字段值时，它们会显示在屏幕上，但Textinput的value属性仍然为null。我试着探索所有的选项，结果归结为setState的异步。由于我是新手，我不知道如何制作一个回调函数，该函数可以填充动态表单字段的value属性。
我并没有把所有的代码都写进去，只是我认为相关的代码可以避免负担。
谢谢sal
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
InputArray: [],
view_data: {
id: 0,
data: null
},
step: 0,
TotalItem: [],
item:
{
id: 0,
Email: null,
Password: null,
Address: null
}
}
};
///onCHANGE FUNCTIONS
EnterValue1 = (e) => {
e.persist();
let item = { ...this.state.item };
item.Email= e.target.value;
this.setState({ item: item });
EnterValue2 = (e) => {
e.persist();
let item = { ...this.state.item };
item.Password = e.target.value;
this.setState({ item: item });
EnterValue3 = (e) => {
e.persist();
let item = { ...this.state.item };
item.Address = e.target.value;
this.setState({ item: item });
//Dynamic form
Inputs = () => {
return (
<View >
<TextInput
placeholder="enter email"
onBlur={this.focusHandler}
value={this.state.item.Email}
onChange={this.EnterValue1}
style={{ borderWidth: 2, borderColor: 'skyblue', margin: 20 }}
/>
<TextInput
placeholder="Password"
onBlur={this.focusHandler}
value={this.state.item.Password}
onChange={this.EnterValue2}
style={{ borderWidth: 2, borderColor: 'skyblue', margin: 20 }}
/>
<TextInput
placeholder="Address"
onBlur={this.focusHandler}
value={this.state.item.Address}
onChange={this.EnterValue3}
style={{ borderWidth: 2, borderColor: 'skyblue', margin: 20 }}
/>
</View>
)
};
// Render Method
render() {
return (
<View style={{ flex: 1, marginTop: 20 }}>
<ScrollView style={styles.scrollView} keyboardShouldPersistTaps='always' >
{this.state.InputArray.map((item, index) => (
//using highlight because it doenst pass on its effect to children, opacity does
<View key={index} onPress={() => this.viewPress(index)}>
<TouchableOpacity onPress={() => this.viewPress(index)}>
{item.data}
{this.state.step === 0 ?
<View style={styles.container}>
<View style={{ flex: 1 }} >
<Button type='button' style={{ flex: 1, backgroundColor: 'red' }} title="add" onPress={this.add} />
</View>
</View>
:
<View style={styles.container}>
<View style={{ flex: 1 }} >
<Button type='submit' style={{ flex: 1, backgroundColor: 'red' }} title="add" onPress={this.add} />
</View>
<View style={{ flex: 1 }}>
<Button type='button' style={{ flex: 1, backgroundColor: 'red' }} title="Remove" onPress={() => this.remove(index)} />
</View>
</View>
}
</TouchableOpacity>
</View>
))
}
</ScrollView>
<View style={styles.container}>
<View style={{ flex: 1 }}>
<Button type='submit' style={{ flex: 1, backgroundColor: 'blue' }} title="submit" onPress={this.submit} />
</View>
</View>
</View>
);
}
}
EnterValue3 = (e) => {
e.persist();
let item = { };
this.setState({ item: {...this.state.item, address: e.target.value });
}
将所有函数替换为扩散运算符，而不是直接分配到对象中。
尝试并检查
EnterValue1 = (e) => {
e.persist();
this.setState({
item: {
...this.state.item,
Email: e.target.value,
}
});
}
注意：您的整个代码可能对调试问题有很大帮助
以防万一有人感兴趣。这可能不是最好的解决方案。因为这是我在react native中的第一个项目。
尽管我无法使用this.state获取值道具，但它们仍然为空。对于我的动态表单，我制作了一个函数，其中包含我的Views/textinput和一个索引参数，该参数由我的map函数提供(它在长度等于添加的表单数的数组上迭代(。我使用了onChageText方法，在setState中使用回调将类型化的值保存在一个id为的对象中，该id需要相当于我的动态映射表单的索引。使用数组对象的索引，values=this.state.object[index]，values，以动态形式保存。
它仍然没有填充值道具，但当我添加新表单时，它确实在上一个表单的前端维护了键入的内容。