#javascript #reactjs #forms #react-native #input
#javascript #reactjs #формы #react-native #ввод
Вопрос:
таким образом, мне не удается получить значение ни одного из моих входных данных, и единственное, что у меня работает, — это захват их внутри рендеринга, но просто получение буквы за буквой. Я хочу использовать одно и то же состояние для всех из них (FormData), поэтому при отправке я могу получить все значения в уникальном объекте
Есть какие-либо рекомендации по ее решению??
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>
)
}
}
Комментарии:
1. Что вы имеете в виду, говоря «захватывать их внутри рендеринга, но просто получать букву за буквой»? Не используются ли оба ввода имени и фамилии
this.state.formData? ( ну вроде как, я думаю, у вас ошибка )2. я имею в виду, что когда я регистрирую значения в консоли, если я напишу hello во входных данных, я получу h, e, l, l, o, а не все слово «привет»
Ответ №1:
Ваша функция on change всегда перезаписывает все ваше предыдущее состояние.
Вы можете использовать функцию setState с обратным вызовом и оператором распространения для обновления состояния без потери предыдущего состояния, например:
- Сначала создайте и функционируйте для onTextChange:
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>
)
}
Это также сохраняет другие переменные в вашем объекте состояния.
Комментарии:
1. вы знаете, как я могу получить оба значения onDateChange в календаре? потому что мне удалось получить только один из них. календарь выбирает день начала и дату окончания, и я просто получаю значение даты окончания
Ответ №2:
Вы продолжаете перезаписывать значение состояния «FormData».
Поскольку вы хотите, чтобы он действовал как объект (с записями: «firstname», «Lastname» и т.д.), Когда вы устанавливаете state, вы должны заключить записи в фигурные скобки следующим образом:
...
onChangeText={firstname => this.setState({formData: {firstname}})}
...
onChangeText={lastname=> this.setState({formData: {lastname}})}
...
Ответ №3:
onChangeText={firstname => this.setState({formData: {...this.state.formData, firstname}})}
onChangeText={lastname=> this.setState({formData: {...this.state.formData, lastname}})}
Используйте это для обновления вложенного объекта состояния, он сохранит старые значения, а также обновит новое