React Native输入框值获取与formData统一状态管理方案问询

我来帮你搞定这个问题！你当前的核心问题是每次更新formData时直接替换了整个对象（比如把formData从对象改成了字符串），导致无法保留其他输入字段的值。另外Picker和日期选择器的状态也没整合到formData里，所以提交时拿不到完整的表单数据。下面是一步步的修复方案：

1. 正确初始化formData为对象 #

首先把formData初始化为包含所有表单字段的空对象，而不是空字符串，这样才能存储多个键值对：

this.state = {
  formData: {
    firstname: '',
    lastname: '',
    role: '',
    startDate: null,
    endDate: null
  }
};

（可以删掉原来的selectedStartDate、selectedEndDate、selectedValue，因为这些状态都要整合到formData里了）

2. 修改TextInput的更新逻辑 #

每次输入时要保留formData里的其他属性，只更新当前字段。使用展开运算符...来复制原有状态，再覆盖当前字段：

<TextInput
  name="firstname"
  style={styles.timeOffInput}
  mode='outlined'
  placeholder="First name"
  value={formData.firstname}
  onChangeText={(firstname) => this.setState(prevState => ({
    formData: {...prevState.formData, firstname}
  }))}
/>

lastname的修改逻辑和上面完全一致，只需要把firstname换成lastname即可。

3. 整合Picker的状态到formData #

删掉原来的selectedValue状态，直接用formData.role作为Picker的选中值，同时修改handlePicker方法来更新formData：

// 新增/修改handlePicker方法
handlePicker = (role) => {
  this.setState(prevState => ({
    formData: {...prevState.formData, role}
  }));
}

// 对应Picker组件的修改
<Picker
  name="role"
  style={styles.timeOffPicker}
  value={formData.role} // 这里用formData.role
  onValueChange={this.handlePicker}
>
  <Picker.Item label="What's your role?" value=''></Picker.Item>
  <Picker.Item label='Warehouse' value='Warehouse'></Picker.Item>
  {/* 其他选项保持不变 */}
</Picker>

4. 整合日期选择器的状态到formData #

首先要给CalendarPicker添加onDateChange回调（你的原代码里没处理日期选择的逻辑，这是个遗漏点），用来更新formData里的startDate和endDate：

<CalendarPicker
  startFromMonday={true}
  allowRangeSelection={true}
  minDate={minDate}
  maxDate={maxDate}
  selectedDayColor="#00486D"
  selectedDayTextColor="#FFFFFF"
  onDateChange={(date, type) => {
    // type会是'start'或'end'，对应选择的是开始还是结束日期
    this.setState(prevState => ({
      formData: {...prevState.formData, [`${type}Date`]: date}
    }));
  }}
/>

然后渲染日期文本时，直接从formData里取：

<View>
  <Text>Start Date: {formData.startDate ? Moment(formData.startDate).format("M/D/YYYY") : ''}</Text>
  <Text>End Date: {formData.endDate ? Moment(formData.endDate).format("M/D/YYYY") : ''}</Text>
</View>

完整修改后的代码 #

import React, { Component } from 'react';
import { ScrollView, View, TextInput, Picker, TouchableOpacity, Text } from 'react-native';
import Moment from 'moment';
import CalendarPicker from 'react-native-calendar-picker'; // 假设你用的是这个组件
import Navbar from './Navbar'; // 假设Navbar是你的自定义组件
import styles from './styles'; // 假设styles是你的样式文件

export default class TimeOff extends Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      formData: {
        firstname: '',
        lastname: '',
        role: '',
        startDate: null,
        endDate: null
      }
    }; 
  } 

  handleSubmit = event => { 
    event.preventDefault() 
    // 现在可以拿到完整的表单数据了！
    console.log('完整表单数据:', this.state.formData) 
  }

  handlePicker = (role) => {
    this.setState(prevState => ({
      formData: {...prevState.formData, role}
    }));
  }

  render(){ 
    Moment.locale('en') 
    const { formData } = this.state; 
    const minDate = new Date(); 
    const maxDate = new Date(2090, 1, 1); 

    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(prevState => ({
              formData: {...prevState.formData, firstname}
            }))} 
          /> 
          <TextInput 
            name="lastname" 
            style={styles.timeOffInput} 
            mode='outlined' 
            placeholder="Last name" 
            value={formData.lastname} 
            onChangeText={(lastname) => this.setState(prevState => ({
              formData: {...prevState.formData, lastname}
            }))} 
          /> 
          <Picker 
            name="role" 
            style={styles.timeOffPicker} 
            value={formData.role} 
            onValueChange={this.handlePicker} 
          > 
            <Picker.Item label="What's your role?" value=''></Picker.Item> 
            <Picker.Item label='Warehouse' value='Warehouse'></Picker.Item> 
            <Picker.Item label='Bakery' value='Bakery'></Picker.Item> 
            <Picker.Item label='Dry pack' value='Dry pack'></Picker.Item> 
            <Picker.Item label='Dry mix' value='Dry mix'></Picker.Item> 
            <Picker.Item label='Maintenance' value='Maintenance'></Picker.Item> 
            <Picker.Item label='Mechanical' value='Mechanical'></Picker.Item> 
          </Picker> 
          <View style={styles.container}> 
            <CalendarPicker 
              startFromMonday={true} 
              allowRangeSelection={true} 
              minDate={minDate} 
              maxDate={maxDate} 
              selectedDayColor="#00486D" 
              selectedDayTextColor="#FFFFFF" 
              onDateChange={(date, type) => {
                this.setState(prevState => ({
                  formData: {...prevState.formData, [`${type}Date`]: date}
                }));
              }}
            /> 
            <View> 
              <Text>Start Date: {formData.startDate ? Moment(formData.startDate).format("M/D/YYYY") : ''}</Text> 
              <Text>End Date: {formData.endDate ? Moment(formData.endDate).format("M/D/YYYY") : ''}</Text> 
            </View> 
          </View> 
          <TouchableOpacity style={styles.btnTimeOff} onPress={this.handleSubmit}> 
            <Text style={styles.btnTextTimeOff}>Submit</Text> 
          </TouchableOpacity> 
        </View> 
      </ScrollView> 
    ) 
  } 
}

这样修改后，你点击提交时就能在handleSubmit里拿到包含所有输入字段、选择器和日期的完整formData对象了！

内容的提问来源于stack exchange，提问作者nicovg15