Javascript 如何在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>
    )
}

导出默认类TimeOff扩展组件{
建造师（道具）{
超级（道具）；
此.state={
selectedStartDate:空，
selectedEndDate:null，
selectedValue:“”，
formData:“”，
};
}
handleSubmit=事件=>{
event.preventDefault（）
console.log（this.state.formData）
render（）{
Moment.locale（'en'））
const{selectedStartDate，selectedEndDate，formData，selectedValue}=this.state；
const minDate=新日期（）；
const maxDate=新日期（2090,1,1）；
const startDate=selectedStartDate？selectedStartDate.toString（）：“”；
const-endDate=selectedEndDate？selectedEndDate.toString（）：“”；
返回(
安排休息时间
this.setState（{formData:firstname}）}
/>
this.setState（{formData:lastname}）}
/>
this.handlePicker（角色）}
>
开始日期：{时刻（开始日期）。格式（“M/D/YYYY”）}
结束日期：{时刻（结束日期）.format（“M/D/YYYY”）}
提交
)
}

}

您一直在覆盖“formData”状态值

由于您希望它在设置状态时充当对象（带有条目：“firstname”、“Lastname”等），因此应使用如下的花括号将条目括起来：

...
onChangeText={firstname => this.setState({formData: {firstname}})}
...
onChangeText={lastname=> this.setState({formData: {lastname}})}
...

---

使用此选项更新嵌套状态对象，它将保留旧值并更新新值

您的更改功能始终覆盖您以前的整个状态

您可以使用带有回调的setState函数和spread运算符来更新状态，而不会丢失以前的状态，如下所示：

首先，为ContextChange创建和使用以下函数：

然后更新组件，如下所示：

导出默认类TimeOff扩展组件{
建造师（道具）{
超级（道具）；
此.state={
selectedStartDate:空，
selectedEndDate:null，
selectedValue:“”，
formData:“”，
};
}
handleSubmit=事件=>{
event.preventDefault（）
console.log（this.state.formData）
}
handleChange=（名称、值）=>{
这是我的国家(
（先前状态）=>{
让previousFormData=previousState.formData；
返回{
…以前的状态，
表格数据：{
…以前的数据，
[名称]：值
}
}
}
)
}
render（）{
Moment.locale（'en'））
const{selectedStartDate，selectedEndDate，formData，selectedValue}=this.state；
const minDate=新日期（）；
const maxDate=新日期（2090,1,1）；
const startDate=selectedStartDate？selectedStartDate.toString（）：“”；
const-endDate=selectedEndDate？selectedEndDate.toString（）：“”；
返回(
安排休息时间
this.handleChange（“firstname”，text）}
/>
this.handleChange（“lastname”，text）}
/>
this.handlePicker（角色）}
>
开始日期：{时刻（开始日期）。格式（“M/D/YYYY”）}
结束日期：{时刻（结束日期）.format（“M/D/YYYY”）}
提交
)
}

---

这还保留了状态对象中的其他变量。

你说的“在渲染中获取它们，但只是逐字获取”是什么意思？名字和姓氏输入不是都使用

this.state.formData

？（有点，我想你有一个bug）我的意思是，当我控制台记录值时，如果我在输入中写hello，我会得到h，e，l，l，o，而不是整个单词“hello”，你知道我如何在日历中同时得到这两个值？因为我只能得到其中一个。日历选择了开始日期和结束日期，我只是得到了结束日期的值

onChangeText={firstname => this.setState({formData: {...this.state.formData, firstname}})}

onChangeText={lastname=> this.setState({formData: {...this.state.formData, lastname}})}

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>
    )
}