Question

我有一些文本字段，我试图将用户输入的任何内容打印到控制台，这是代码：

export default function CreateOrderPage() {

    const [state, setState] = useState ({
        companyName: '',
        beginDate: ''
    })

    return (
        {/* Some code */}

        <TextInput style = {styles.inputText} 
            placeholder = {'Company name'}
            placeholderTextColor = {'#B2B2B2'}
            onChangeText = {text => setState(text)}
            value = {state.companyName}
        />

        <TextInput style = {styles.inputText} 
            placeholder = {'Order placed date'}
            placeholderTextColor = {'#B2B2B2'}
            onChangeText = {text => setState(text)}
            value = {state.beginDate}
        />

        <TouchableOpacity style = {styles.saveButton} onPress = {() => {
          console.log(state.companyName, state.beginDate);
        }}> 
            <Text style = {styles.saveButtonText}>Save</Text>
        </TouchableOpacity>
    )
}

由于某种原因，它总是打印出“ Undefined Undefined”，我从教程中复制了完全相同的内容，并做了一些改动，我什至尝试了StackOverFlow中给出的解决方案，但对我没有任何帮助，感谢您反馈！

PS：我是React Native的新手，如果我没有使用正确的术语，我深表歉意。

Answer 1

状态看起来像这样

 const [name, setName] = useState ('')
    const [date, setDate] = useState ('')

功能如下

 const   onChangeText = e => setName(e.target.value)

 const   onChangeDate = e => setDate(e.target.value)

输入外观如下

<TextInput style = {styles.inputText} 
        onChange={onChangeText }
            value = {text}
        />
 <TextInput style = {styles.inputText} 
         onChange={onChangeDate }
            value = {date}
        />

Answer 2

您可以像这样更新状态或创建一种处理更新的方法

1）

const handleUpdate = (keyProp) => (event) => {
  setState({
    ...state,
    [keyProp]: event.target.value,
  })
};

usage: onChangeText = {handleUpdate('companyName')}
usage: onChangeText = {handleUpdate('beginDate')}

export default function CreateOrderPage() {

    const [state, setState] = useState ({
        companyName: '',
        beginDate: ''
    })

    return (
        {/* Some code */}

        <TextInput style = {styles.inputText} 
            placeholder = {'Company name'}
            placeholderTextColor = {'#B2B2B2'}
            onChangeText = {text => setState({...state, companyName: text })}
            value = {state.companyName}
        />

        <TextInput style = {styles.inputText} 
            placeholder = {'Order placed date'}
            placeholderTextColor = {'#B2B2B2'}
            onChangeText = {text => setState({...state, beginDate: text })}
            value = {state.beginDate}
        />

        <TouchableOpacity style = {styles.saveButton} onPress = {() => {
          console.log(state.companyName, state.beginDate);
        }}> 
            <Text style = {styles.saveButtonText}>Save</Text>
        </TouchableOpacity>
    )
}

Answer 3

应将状态设置为对象，这样才能访问每个键值对。

export default function CreateOrderPage() {

    const [state, setState] = useState ({
        companyName: '',
        beginDate: ''
    })

    return (
        {/* Some code */}

        <TextInput style = {styles.inputText} 
            placeholder = {'Company name'}
            placeholderTextColor = {'#B2B2B2'}
            onChangeText = {text => setState(prev => {
                                           companyName: text,
                                           beginDate: prev.beginDate
                                           })}
            value = {state.companyName}
        />

        <TextInput style = {styles.inputText} 
            placeholder = {'Order placed date'}
            placeholderTextColor = {'#B2B2B2'}
            onChangeText = {text => setState(prev => {
                                           companyName: prev.companyName,
                                           beginDate: text
                                           })}
            value = {state.beginDate}
        />

        <TouchableOpacity style = {styles.saveButton} onPress = {() => {
          console.log(state.companyName, state.beginDate);
        }}> 
            <Text style = {styles.saveButtonText}>Save</Text>
        </TouchableOpacity>
    )
}

获取用户输入总是返回“ undefined”

3 个答案: