[英]how can i get the value of this inputs in react native?
so i cannot manage to get the value of any of my inputs, and the only thing is working for me is grabbing them inside render but just getting letter by letter.所以我无法获得任何输入的价值,唯一对我有用的是在渲染中抓取它们,但只是逐个字母地获取。 I want to use the same state for all of them (formData) so when I submit I can grab all the values in an unique object
我想对所有这些 (formData) 使用相同的状态,所以当我提交时,我可以获取唯一对象中的所有值
Any recommendation to solve it??有什么建议可以解决吗??
export default class TimeOff extends Component {
constructor(props) {
super(props);
this.state = {
selectedStartDate: null,
selectedEndDate: null,
selectedValue: '',
formData: '',
};
}
handleSubmit = event => {
event.preventDefault()
console.log(this.state.formData)
render(){
Moment.locale('en')
const { selectedStartDate, selectedEndDate, formData, selectedValue } = this.state;
const minDate = new Date();
const maxDate = new Date(2090, 1, 1);
const startDate = selectedStartDate ? selectedStartDate.toString() : '';
const endDate = selectedEndDate ? selectedEndDate.toString() : '';
return(
<ScrollView showsVerticalScrollIndicator={false}>
<Navbar />
<Text style={styles.hOneTimeOff}>Schedule time off</Text>
<View style={styles.timeOffWrapper}>
<TextInput
name="firstname"
style={styles.timeOffInput}
mode='outlined'
placeholder="First name"
value={formData.firstname}
onChangeText={firstname => this.setState({formData: firstname})}
/>
<TextInput
name="lastname"
style={styles.timeOffInput}
mode='outlined'
placeholder="Last name"
value={formData.lastname}
onChangeText={lastname => this.setState({formData: lastname})}
/>
<Picker
name="role"
style={styles.timeOffPicker}
value={formData.role}
selectedValue={selectedValue}
onValueChange={role => this.handlePicker(role)}
>
<Picker.Item label="What's your role?" value=''/>
<Picker.Item label='Warehouse' value='Warehouse'/>
<Picker.Item label='Bakery' value='Bakery'/>
<Picker.Item label='Dry pack' value='Dry pack'/>
<Picker.Item label='Dry mix' value='Dry mix'/>
<Picker.Item label='Maintenance' value='Maintenance'/>
<Picker.Item label='Mechanical' value='Mechanical'/>
</Picker>
<View style={styles.container}>
<CalendarPicker
startFromMonday={true}
allowRangeSelection={true}
minDate={minDate}
maxDate={maxDate}
selectedDayColor="#00486D"
selectedDayTextColor="#FFFFFF"
/>
<View>
<Text>Start Date: {Moment(startDate).format("M/D/YYYY")}</Text>
<Text>End Date: {Moment(endDate).format("M/D/YYYY")}</Text>
</View>
</View>
<TouchableOpacity style={styles.btnTimeOff} onPress={this.handleSubmit}>
<Text style={styles.btnTextTimeOff}>Submit</Text>
</TouchableOpacity>
</View>
</ScrollView>
)
}
} }
Your on change function is always overwriting your entire previous state.您的 on change 功能总是会覆盖您之前的整个状态。
You can use the setState function with a callback and the spread operator to update the state without losing previous state like so:您可以使用带有回调和扩展运算符的 setState 函数来更新状态而不会丢失以前的状态,如下所示:
const handleChange = (name, value) => {
this.setState(
(previousState) => {
let previousFormData = previousState.formData;
return {
...previousState,
formData: {
...previousFormData,
[name]: value
}
}
}
)
}
export default class TimeOff extends Component {
constructor(props) {
super(props);
this.state = {
selectedStartDate: null,
selectedEndDate: null,
selectedValue: '',
formData: '',
};
}
handleSubmit = event => {
event.preventDefault()
console.log(this.state.formData)
}
handleChange = (name, value) => {
this.setState(
(previousState) => {
let previousFormData = previousState.formData;
return {
...previousState,
formData: {
...previousFormData,
[name]: value
}
}
}
)
}
render(){
Moment.locale('en')
const { selectedStartDate, selectedEndDate, formData, selectedValue } = this.state;
const minDate = new Date();
const maxDate = new Date(2090, 1, 1);
const startDate = selectedStartDate ? selectedStartDate.toString() : '';
const endDate = selectedEndDate ? selectedEndDate.toString() : '';
return(
<ScrollView showsVerticalScrollIndicator={false}>
<Navbar />
<Text style={styles.hOneTimeOff}>Schedule time off</Text>
<View style={styles.timeOffWrapper}>
<TextInput
name="firstname"
style={styles.timeOffInput}
mode='outlined'
placeholder="First name"
value={formData.firstname}
onChangeText={text => this.handleChange("firstname", text)}
/>
<TextInput
name="lastname"
style={styles.timeOffInput}
mode='outlined'
placeholder="Last name"
value={formData.lastname}
onChangeText={text => this.handleChange("lastname", text)}
/>
<Picker
name="role"
style={styles.timeOffPicker}
value={formData.role}
selectedValue={selectedValue}
onValueChange={role => this.handlePicker(role)}
>
<Picker.Item label="What's your role?" value=''/>
<Picker.Item label='Warehouse' value='Warehouse'/>
<Picker.Item label='Bakery' value='Bakery'/>
<Picker.Item label='Dry pack' value='Dry pack'/>
<Picker.Item label='Dry mix' value='Dry mix'/>
<Picker.Item label='Maintenance' value='Maintenance'/>
<Picker.Item label='Mechanical' value='Mechanical'/>
</Picker>
<View style={styles.container}>
<CalendarPicker
startFromMonday={true}
allowRangeSelection={true}
minDate={minDate}
maxDate={maxDate}
selectedDayColor="#00486D"
selectedDayTextColor="#FFFFFF"
/>
<View>
<Text>Start Date: {Moment(startDate).format("M/D/YYYY")}</Text>
<Text>End Date: {Moment(endDate).format("M/D/YYYY")}</Text>
</View>
</View>
<TouchableOpacity style={styles.btnTimeOff} onPress={this.handleSubmit}>
<Text style={styles.btnTextTimeOff}>Submit</Text>
</TouchableOpacity>
</View>
</ScrollView>
)
}
This also preserves the other variables in your state object.这也保留了状态对象中的其他变量。
You keep overwriting the "formData" state value.您不断覆盖“formData”状态值。
Since you want it to act as an object (with entries: "firstname", "Lastname", etc) when you setState you should wrap the entries with curly brackets like this:由于您希望它在 setState 时充当对象(带有条目:“firstname”、“Lastname”等),因此您应该用大括号将条目包裹起来,如下所示:
...
onChangeText={firstname => this.setState({formData: {firstname}})}
...
onChangeText={lastname=> this.setState({formData: {lastname}})}
...
onChangeText={firstname => this.setState({formData: {...this.state.formData, firstname}})}
onChangeText={lastname=> this.setState({formData: {...this.state.formData, lastname}})}
Use this to update the nested state object, it will keep old values and would also update new one使用它来更新嵌套的状态对象,它将保留旧值并更新新值
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.