如何在本机反应中获得此输入的值？答案

【问题标题】：how can i get the value of this inputs in react native?如何在本机反应中获得此输入的值？
【发布时间】：2020-12-27 15:47:56
【问题描述】：

所以我无法获得任何输入的值，唯一对我有用的是在渲染中抓取它们，但只是逐个字母地获取。我想为所有这些（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>
    )
}

}

【问题讨论】：

你说“在渲染中抓取它们但只是逐个字母地获取”是什么意思？名字和姓氏输入不是都使用this.state.formData吗？（好吧，我认为你有一个错误）
我的意思是，当我在控制台记录值时，如果我在输入中写上 hello，我将得到 h、e、l、l、o 而不是整个单词 'hello'

标签： javascript reactjs forms react-native input

【解决方案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>
    )
}

这也会保留状态对象中的其他变量。

【讨论】：

你知道如何在日历中获取两个值 onDateChange 吗？因为我只能设法得到其中一个。日历选择开始日期和结束日期，我只是得到结束日期的值

【解决方案2】：

您不断覆盖“formData”状态值。

由于您希望它在 setState 时充当对象（具有条目：“firstname”、“Lastname”等），因此您应该将条目用大括号括起来，如下所示：

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

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

【讨论】：