Блог

Главная - Вопросы по программированию - Как отправить поля ввода в компоненте функции React в функцию

Как отправить поля ввода в компоненте функции React в функцию

#javascript #reactjs

Вопрос:

У меня есть 4 поля ввода в моем функциональном компоненте react, я сделал функцию contactmebuttonпрессованной, я хочу захватить все вводимые данные, адрес электронной почты, название компании, сообщение, когда я нажимаю на кнопку «Связаться со мной».

Нужно ли мне здесь состояние или я могу достичь своей цели с помощью своего кода?

  • Прямо сейчас я печатаю на консоли для тестирования, позже я отправлю информацию на свой сервер Django.

contact.js

 import React, {Component} from 'react';
import Navbar from "./Navbar";
import {useStyles} from '../../static/styles/styles';
import {TextField, Typography, Button, Grid, Box, withStyles} from "@material-ui/core";
import SendIcon from "@material-ui/icons/Send";
import {WithStyles, makeStyles} from "@material-ui/core/styles";

    const InputField = withStyles({
        root: {
            "amp; label.Mui-focused": {
                color: "tomato",
            },
            "amp; label": {
                color: "tan",
            },
            "amp; .MuiOutlinedInput-root": {
                "amp; fieldset": {
                    borderColor: "tan",
                },
                "amp;:hover fieldset": {
                    borderColor: "tan"
                },
                "amp;.Mui-focused fieldset": {
                    borderColor: "tan",
                }
            }
        },
    })(TextField);
    
    function contactMeButtonPressed() {
        const requestOptions = {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify({
    
                // how to get all the InputField from box component in Contact
            }),
        };
        fetch("/backend/contact-me/", requestOptions)
            .then((response) => response.json())
            .then((data) => console.log(requestOptions));
    }
    
    const Contact = () => {
        const classes = useStyles(); // To use the CSS Styles in styles.js
        return (
            <>
                <Box component="div" style={{background: "#233", height: "100vh"}}>
                    <Navbar/>
                    <Grid container justify="center">
                        <Box component="form" className={classes.form}>
                            <Typography variant="h5" style={{
                                color: "tomato",
                                textAlign: "center",
                                textTransform: "uppercase",
                            }}
                            >
                                Contact me
                            </Typography>
                            <InputField
                                fullWidth={true}
                                label="Name"
                                variant="outlined"
                                inputProps={{style: {color: "white"}}}
                                margin="dense"
                                size="medium"
                            />
                            <br/>
                            <InputField
                                fullWidth={true}
                                label="Email"
                                variant="outlined"
                                inputProps={{style: {color: "white"}}}
                                margin="dense"
                                size="medium"
                            />
                            <br/>
                            <InputField
                                fullWidth={true}
                                label="Company Name"
                                variant="outlined"
                                inputProps={{style: {color: "white"}}}
                                margin="dense"
                                size="medium"
                            />
                            <br/>
                            <InputField
                                fullWidth={true}
                                label="Message"
                                variant="outlined"
                                inputProps={{style: {color: "white"}}}
                                margin="dense"
                                size="medium"
                            />
                            <br/>
                            <Button
                                className={classes.contactButton}
                                variant="outlined"
                                fullWidth={true}
                                endIcon={<SendIcon/>}
                                onClick={contactMeButtonPressed}
                            >
                                Contact me
                            </Button>
                        </Box>
                    </Grid>
                </Box>
            </>
        );
    };
    
    export default Contact;

код с решением с использованием крючков:

 import React, {Component} from 'react';
import Navbar from "./Navbar";
import {useStyles} from '../../static/styles/styles';
import {TextField, Typography, Button, Grid, Box, withStyles} from "@material-ui/core";
import SendIcon from "@material-ui/icons/Send";
import {WithStyles, makeStyles} from "@material-ui/core/styles";
import {useState} from 'react';


const InputField = withStyles({
    root: {
        "amp; label.Mui-focused": {
            color: "tomato",
        },
        "amp; label": {
            color: "tan",
        },
        "amp; .MuiOutlinedInput-root": {
            "amp; fieldset": {
                borderColor: "tan",
            },
            "amp;:hover fieldset": {
                borderColor: "tan"
            },
            "amp;.Mui-focused fieldset": {
                borderColor: "tan",
            }
        }
    },
})(TextField);


const Contact = () => {
    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [company_name, setCompany_name] = useState('')
    const [message, setMessage] = useState('')

    function contactMeButtonPressed() {
        const requestOptions = {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify({
                name: name,
                company_name: company_name,
                message: message,
                email: email,
            }),
        };
        fetch("/backend/contact-me/", requestOptions)
            .then((response) => response.json())
            .then((data) => console.log(requestOptions));
    }

    const classes = useStyles(); // To use the CSS Styles in styles.js
    return (
        <>
            <Box component="div" style={{background: "#233", height: "100vh"}}>
                <Navbar/>
                <Grid container justify="center">
                    <Box component="form" className={classes.form}>
                        <Typography variant="h5" style={{
                            color: "tomato",
                            textAlign: "center",
                            textTransform: "uppercase",
                        }}
                        >
                            Contact me
                        </Typography>
                        <InputField
                            value={name}
                            onChange={e => setName(e.target.value)}
                            fullWidth={true}
                            label="Name"
                            variant="outlined"
                            inputProps={{style: {color: "white"}}}
                            margin="dense"
                            size="medium"
                        />
                        <br/>
                        <InputField
                            value={email}
                            onChange={e => setEmail(e.target.value)}
                            fullWidth={true}
                            label="Email"
                            variant="outlined"
                            inputProps={{style: {color: "white"}}}
                            margin="dense"
                            size="medium"
                        />
                        <br/>
                        <InputField
                            value={company_name}
                            onChange={e => setCompany_name(e.target.value)}
                            fullWidth={true}
                            label="Company Name"
                            variant="outlined"
                            inputProps={{style: {color: "white"}}}
                            margin="dense"
                            size="medium"
                        />
                        <br/>
                        <InputField
                            value={message}
                            onChange={e => setMessage(e.target.value)}
                            fullWidth={true}
                            label="Message"
                            variant="outlined"
                            inputProps={{style: {color: "white"}}}
                            margin="dense"
                            size="medium"
                        />
                        <br/>
                        <Button
                            className={classes.contactButton}
                            variant="outlined"
                            fullWidth={true}
                            endIcon={<SendIcon/>}
                            onClick={contactMeButtonPressed}
                        >
                            Contact me
                        </Button>
                    </Box>
                </Grid>
            </Box>
        </>
    );
};

export default Contact;

Ответ №1:

Да, вам нужно состояние для управления данными в reactjs. Поскольку вы используете функциональный компонент, управлять данными очень просто. вы можете использовать useState для управления данными. Я покажу вам пример управления данными в react с помощью ввода.

импортируйте состояние использования, используя следующую команду

 import React, {useState} from 'react';

следующая команда используется для объявления переменной состояния.

 const [text, setText] = useState('')

следующая команда-это объявление ввода.

 <input
  value={text}
  onChange={e => setText(e.target.value)}
  required
></input>

В конце ваши данные будут сохранены в текстовом состоянии, которое вы используете для отправки данных на серверную часть.

Комментарии:

1. Означает ли это, что мне нужна функция usestate для каждого ввода? и как я могу отправить все значения в свою функцию contactMeButtonPressed, чтобы я мог отправить их на свой сервер? Я еще не выучил крючки, но сейчас читаю о них

2. @Alwayslearning после добавления вышеуказанных фрагментов и крючков в ваш код теперь вкладка «Ввод» настроена на сохранение значений в состоянии. После ввода любого значения в поле ввода, например, если вы вводите «abc», то «abc» сохраняется, text вы можете использовать его в компоненте или передать его другому компоненту. Это почти то же самое, что глобальная переменная для компонента.

3. Похоже, это работает, я добавил код обновления, буду признателен, если вы посмотрите, правильно ли я их использовал

Ответ №2:

В материале InputField у вашего компонента может быть идентификационный тег, поэтому я бы установил идентификатор для компонента InputField, а затем, когда вы нажмете кнопку «Контакт», вы можете получить все поля примерно так:

 function contactMeButtonPressed() {
        const Name = document.getElementByID('name').value;
        const Email = document.getElementByID('email').value;
        const Company Name = document.getElementByID('company-name').value;
        const Message = document.getElementByID('message').value;

        const requestOptions = {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify({
    
                // how to get all the InputField from box component in Contact
            }),
        };
        fetch("/backend/contact-me/", requestOptions)
            .then((response) => response.json())
            .then((data) => console.log(requestOptions));
    }

а затем отформатируйте эти значения в соответствии с ожиданиями вашей базы данных.

Комментарии:

1. Спасибо за уделенное время! Я использовал крючки, в конце концов, похоже, пока работает, добавил обновленный код

2. Лично я не думаю, что вам нужно использовать какое-либо состояние в вашем компоненте, чтобы это работало, так как вы можете просто получить информацию из поля ввода, используя идентификатор, но я рад, что помог.

Метки: