如何在 react-navigation 5 中从 TextInput 获取文本

Question

我在导航中实现了表单 class 现在我无法在其中添加构造函数

const Screen = ({navigation}) => { … } class.

    const ContactScreen = ({navigation}) => {
    
        constructor(props) {
            super(props)
            this.state = { email: '', number: '', note: '', }
        };
        
        buttonpress() {
            console.log(this.state.email);
            console.log(this.state.number);
            console.log(this.state.note);
        };
    
        return (
                <View style={styles.main}>
                    <ScrollView horizontal={false} showsHorizontalScrollIndicator={false} style={{paddingTop: 20,}}>
                        <TextInput placeholder="Email" style={styles.viewform}
                            onChangeText={(text) => this.setState({email:text})} />
                        <TextInput secureTextEntry={true} placeholder="Mobile Number" style={styles.viewform}
                            onChangeText={(text) => this.setState({number:text})} />
                        <TextInput secureTextEntry={true} placeholder="Note" multiline style={styles.note}
                            onChangeText={(text) => this.setState({note:text})} />

                        <View style={styles.viewbutton}>
                            <Button onPress={() => this.buttonpress()} title="submit" color="#841584" style={styles.submit}/>
                        </View>
                    </ScrollView>
                </View>
        );}

但是它显示错误，我不知道如何解决。

        error: SyntaxError: E:\Shravan Variya\React Native\Learning\API\Api_Demo\src\screens\ContactScreen.js: Missing semicolon (8:22)

           6 | const ContactScreen = ({navigation}) => {
           7 |
        >  8 |     constructor(props) {
            |                       ^
          9 |         super(props)
         10 |         this.state = { email: '', number: '', note: '', }
         11 |     };

我是新手。

Answer 1

我们不能在功能组件中使用构造函数，如果你想在组件内部使用状态，那么你必须使用 useState 钩子将数据存储在状态中并进行处理。

否则您必须将整个组件转换为 class 组件。

查看文档了解更多信息。 https://reactjs.org/docs/state-and-lifecycle.html

Answer 2

您正在使用功能组件，这意味着您不能使用构造函数。您需要在功能组件中使用钩子。在你的情况下， useState 是改变你的状态所需要的。请参阅下面的示例。

import React, { useState } from 'react';
const ContactScreen = ({ navigation }) => {

    const [email, setEmail] = useState('');
    const [number, setNumber] = useState('');
    const [note, setNote] = useState('');
    

    const buttonpress = () => {
        console.log(email);
        console.log(number);
        console.log(note);
    };

    return (
        <View style={styles.main}>
            <ScrollView horizontal={false} showsHorizontalScrollIndicator={false} style={{ paddingTop: 20, }}>
                <TextInput placeholder="Email" style={styles.viewform}
                    onChangeText={setEmail} />
                <TextInput secureTextEntry={true} placeholder="Mobile Number" style={styles.viewform}
                    onChangeText={setNumber} />
                <TextInput secureTextEntry={true} placeholder="Note" multiline style={styles.note}
                    onChangeText={setNote} />

                <View style={styles.viewbutton}>
                    <Button onPress={() => buttonpress()} title="submit" color="#841584" style={styles.submit} />
                </View>
            </ScrollView>
        </View>
    );
}

Answer 3

我想就是这样，我找到了解决方案。我正在使用组件 class 来解决这个问题。

export default class ContactScreen extends Component {

    constructor(props) {
        super(props)
        this.state = { email: '', number: '', note: '', }
    };
    
    buttonpress() {
        console.log(this.state.email);
        console.log(this.state.number);
        console.log(this.state.note);
    };
    
    render() {
        return (
            <View style={styles.main}>
                <ScrollView horizontal={false} showsHorizontalScrollIndicator={false} style={{paddingTop: 20,}}>
                    <TextInput placeholder="Email" style={styles.viewform}
                        onChangeText={(text) => this.setState({email:text})} />
                    <TextInput secureTextEntry={true} placeholder="Mobile Number" style={styles.viewform}
                        onChangeText={(text) => this.setState({number:text})} />
                    <TextInput secureTextEntry={true} placeholder="Note" multiline style={styles.note}
                        onChangeText={(text) => this.setState({note:text})} />

                    <View style={styles.viewbutton}>
                        <Button onPress={() => this.buttonpress()} title="submit" color="#841584" style={styles.submit}/>
                    </View>
                </ScrollView>
            </View>
        );
    }
};

如何在 react-navigation 5 中从 TextInput 获取文本

How to get text from TextInput in react-navigation 5

forms

react-native

react-navigation