如何使用 setState 回调来更新 TextInput 的 value 属性 [英] How to use setState call back to update value prop of TextInput
问题描述
我是 React 新手，正在尝试构建动态表单.它似乎工作正常.问题是当我输入字段值时，它们显示在屏幕上，但 Textinput 的 value 属性保持为空.我试图探索所有选项，最终归结为 setState 的异步.由于我是新手，我不知道如何制作可以填充动态表单字段的 value 属性的回调函数.
我没有包含所有代码，只是我认为与避免负担相关的代码.
谢谢萨尔
<预><代码>类 App 扩展了 React.Component {构造函数(道具){超级(道具)；this.state = {输入数组:[]，视图数据:{编号:0，数据:空},步骤:0，总项目:[]，物品:{编号:0，电子邮件:空，密码:空，地址:空}}};///onCHANGE 函数EnterValue1 = (e) =>{e.persist();让 item = { ...this.state.item };item.Email= e.target.value;this.setState({ item: item });EnterValue2 = (e) =>{e.persist();让 item = { ...this.state.item };item.Password = e.target.value;this.setState({ item: item });EnterValue3 = (e) =>{e.persist();让 item = { ...this.state.item };item.Address = e.target.value;this.setState({ item: item });//动态表格输入 = () =>{返回 (<查看><文本输入占位符=输入电子邮件"onBlur={this.focusHandler}值={this.state.item.Email}onChange={this.EnterValue1}style={{ borderWidth: 2, borderColor: 'skyblue', margin: 20 }}/><文本输入占位符=密码"onBlur={this.focusHandler}值={this.state.item.Password}onChange={this.EnterValue2}style={{ borderWidth: 2, borderColor: 'skyblue', margin: 20 }}/><文本输入占位符=地址"onBlur={this.focusHandler}值={this.state.item.Address}onChange={this.EnterValue3}style={{ borderWidth: 2, borderColor: 'skyblue', margin: 20 }}/></查看>)};//渲染方法使成为() {返回 (<视图样式={{ flex: 1, marginTop: 20 }}><ScrollView style={styles.scrollView} keyboardShouldPersistTaps='always' >{this.state.InputArray.map((item, index) => (//使用高亮是因为它不会将它的效果传递给孩子，不透明度会<查看键={index} onPress={() =>this.viewPress(index)}><TouchableOpacity onPress={() =>this.viewPress(index)}>{item.data}{this.state.step === 0 ?<视图样式={styles.container}><视图样式={{ flex: 1 }} ><Button type='button' style={{ flex: 1, backgroundColor: 'red' }} title=add";onPress={this.add}/></查看></查看>:<视图样式={styles.container}><视图样式={{ flex: 1 }} ><Button type='submit' style={{ flex: 1, backgroundColor: 'red' }} title=add";onPress={this.add}/></查看><视图样式={{ flex: 1 }}><Button type='button' style={{ flex: 1, backgroundColor: 'red' }} title="Remove";onPress={() =>this.remove(index)}/></查看></查看>}</TouchableOpacity></查看>))}</滚动视图><视图样式={styles.container}><视图样式={{ flex: 1 }}><Button type='submit' style={{ flex: 1, backgroundColor: 'blue' }} title="submit";onPress={this.submit}/></查看></查看></查看>);}}以防万一有人感兴趣.这可能不是最好的解决方案.因为这是我的第一个 React Native 项目.
虽然我无法使用 this.state 获取 values 属性，但它们仍然为空.对于我的动态表单，我创建了一个包含我的视图/文本输入的函数，该函数带有一个索引参数，由我的 map 函数提供(它遍历一个长度等于添加的表单数的数组).我使用了 onChageText 方法，并在 setState 中使用了一个回调来将输入的值保存在一个带有 id 的对象中，该对象需要与我的动态映射表单的索引等效.使用数组对象的索引，values=this.state.object[index],values，以动态形式保存.
它仍然没有填充 values 属性，但是当我添加新表单时，它确实在前一个表单的前端保留了键入的内容.
I am new in React and trying to build dynamic form. It seems to work fine. The problem is when i type the field values, they are shown in screen, but the value property of Textinput remain null. I tried to explore all options, and it came down to async of setState. Since i am new i do not know how to make a call back function which can populate the value property of the dynamic form fields.
I have not inlcuded all the code, just what i thought would be relevant to avoid burden.
thanks 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>
);
}
}
Just in case for someone interested. This may not be the best solution. As this is my first project in react native.
Although i was not able to get the values prop using this.state, and they remained null. For my dynamic form, i made a function containing my Views/textinput with an index argument, provided by my map function(which iterates over an array that has length equal to number of forms added). I used onChageText method and in setState used a callback to save the typed values in an object with an id, that needs to be equivalent to the index of my dynamics mapped form. Using index of object of arrays, values=this.state.object[index],values, is saved in dynamic form.
It still did not populate the values prop, but it sure did maintain the typed content in the front end of the previous form when i add new form.
这篇关于如何使用 setState 回调来更新 TextInput 的 value 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
