Javascript 如何将输入值传递给另一个组件_Javascript_Reactjs_Forms_Redux_Components

Javascript 如何将输入值传递给另一个组件

javascript reactjs forms redux

Javascript 如何将输入值传递给另一个组件,javascript,reactjs,forms,redux,components,Javascript,Reactjs,Forms,Redux,Components,我有一个名为form.js的表单组件，我将该组件导入到Profile.js中，我想将输入值从form.js组件传输到Profile.js（对于更具说明性的示例，您可以看到图片）。为了缩短代码，我特意从jsx中删除了几行代码 Profile.jsx import React, {useState} from 'react'; import "./css/style.css" import {Calendar} from "react-calendar"; i

我有一个名为form.js的表单组件，我将该组件导入到Profile.js中，我想将输入值从form.js组件传输到Profile.js（对于更具说明性的示例，您可以看到图片）。为了缩短代码，我特意从jsx中删除了几行代码

Profile.jsx

import React, {useState} from 'react';
import "./css/style.css"
import {Calendar} from "react-calendar";
import 'react-calendar/dist/Calendar.css';
import {DateTimeProfile} from "./Month/Clock";
import {UserCertificates} from "./ProfileContent/UserCertificate/UserCertificates";
import {AboutFormUsers} from "./ProfileContent/AboutFormUser/AboutFormUsers";

export const Profile = (props) => {

    const [value, onChange] = useState(new Date());

    if (!props.profile) {
        return <p>Loading...</p>
    }

    return (
        <div>
            <div className="contentProfile">
                <div className="userProfileInfo">

                    <div style={{margin: "20px"}}>
                        <div>
                            <AboutFormUsers {...props} />
                        </div>
                    </div>
                </div>

                <div className="achivements">
                    <div className="achivementsTitleContainer">

                        <div>
                            <div className="achivementsTitle">
                                <h3>Keep on completing achievements and become one of the best coders</h3>

                                <p>The input value should be here</p>
                            </div>
                        </div>
                    </div>

                    <div className={"centerColumnLine"}>
                        <hr/>
                    </div>
                </div>

                <div className="messages">
                    <div className="DateTimeProfile">
                        <DateTimeProfile/>
                    </div>

                    <div>
                        <Calendar onChange={onChange} value={value} className={"Calendar"}/>
                    </div>

                    <div>
                        <UserCertificates/>
                    </div>
                </div>
            </div>
        </div>
    )
}

import React from 'react';
import './css/style.css';

export class AboutFormUsers extends React.Component {

    state = {
        user: '',
    };

    handleChange = (event) => {
        const input = event.target;
        const value = input.value;

        this.setState({ [input.name]: value });
    };

    handleFormSubmit = (event) => {
        localStorage.setItem('user', this.state.user);
        event.preventDefault(); //отменяем отправку формы
    };

    componentDidMount() {
        const user = localStorage.getItem('user');
        this.setState({ user });
    }

    render() {
        return (
            <div className={"aboutFormContainer"}>
                <form onSubmit={this.handleFormSubmit}>
                    <div className={"aboutUser"}>
                        <p>Write about yourself</p>
                    </div>
                    <div>
                        <label>
                            <textarea name="user" className={"textarea"} value={this.state.user} onChange={this.handleChange}/>
                        </label>
                    </div>

                    <div>
                        <button type="submit">Sign In</button>
                    </div>

                </form>
            </div>
        );
    }
}

import React，{useState}来自“React”；
导入“/css/style.css”
从“反应日历”导入{Calendar}；
导入'react calendar/dist/calendar.css'；
从“/Month/Clock”导入{DateTimeProfile}；
从“/ProfileContent/UserCertificate/UserCertificates”导入{UserCertificates}”；
从“/ProfileContent/AboutFormUser/AboutFormUsers”导入{AboutFormUsers}”；
导出常量配置文件=（道具）=>{
const[value，onChange]=useState（新日期（））；
如果（！props.profile）{
返回加载
}
返回(
不断完成成就，成为最好的程序员之一
输入值应该在这里

)
}

AboutFormUsers.jsx

import React, {useState} from 'react';
import "./css/style.css"
import {Calendar} from "react-calendar";
import 'react-calendar/dist/Calendar.css';
import {DateTimeProfile} from "./Month/Clock";
import {UserCertificates} from "./ProfileContent/UserCertificate/UserCertificates";
import {AboutFormUsers} from "./ProfileContent/AboutFormUser/AboutFormUsers";

export const Profile = (props) => {

    const [value, onChange] = useState(new Date());

    if (!props.profile) {
        return <p>Loading...</p>
    }

    return (
        <div>
            <div className="contentProfile">
                <div className="userProfileInfo">

                    <div style={{margin: "20px"}}>
                        <div>
                            <AboutFormUsers {...props} />
                        </div>
                    </div>
                </div>

                <div className="achivements">
                    <div className="achivementsTitleContainer">

                        <div>
                            <div className="achivementsTitle">
                                <h3>Keep on completing achievements and become one of the best coders</h3>

                                <p>The input value should be here</p>
                            </div>
                        </div>
                    </div>

                    <div className={"centerColumnLine"}>
                        <hr/>
                    </div>
                </div>

                <div className="messages">
                    <div className="DateTimeProfile">
                        <DateTimeProfile/>
                    </div>

                    <div>
                        <Calendar onChange={onChange} value={value} className={"Calendar"}/>
                    </div>

                    <div>
                        <UserCertificates/>
                    </div>
                </div>
            </div>
        </div>
    )
}

import React from 'react';
import './css/style.css';

export class AboutFormUsers extends React.Component {

    state = {
        user: '',
    };

    handleChange = (event) => {
        const input = event.target;
        const value = input.value;

        this.setState({ [input.name]: value });
    };

    handleFormSubmit = (event) => {
        localStorage.setItem('user', this.state.user);
        event.preventDefault(); //отменяем отправку формы
    };

    componentDidMount() {
        const user = localStorage.getItem('user');
        this.setState({ user });
    }

    render() {
        return (
            <div className={"aboutFormContainer"}>
                <form onSubmit={this.handleFormSubmit}>
                    <div className={"aboutUser"}>
                        <p>Write about yourself</p>
                    </div>
                    <div>
                        <label>
                            <textarea name="user" className={"textarea"} value={this.state.user} onChange={this.handleChange}/>
                        </label>
                    </div>

                    <div>
                        <button type="submit">Sign In</button>
                    </div>

                </form>
            </div>
        );
    }
}

从“React”导入React；
导入“./css/style.css”；
导出类AboutFormUsers扩展React.Component{
状态={
用户：“”，
};
handleChange=（事件）=>{
常量输入=event.target；
常量值=input.value；
this.setState（{[input.name]：value}）；
};
handleFormSubmit=（事件）=>{
localStorage.setItem（'user'，this.state.user）；
event.preventDefault（）；//
};
componentDidMount（）{
const user=localStorage.getItem（'user'）；
this.setState（{user}）；
}
render（）{
返回(
写下你自己
登录
);
}
}

您可以将事件回调传递给

关于博物馆的组件。在AboutFormUsers
组件中，在更改输入值时调用此回调。请检查下面的死讯
Profile.jsx
import React, {useState} from 'react';
import "./css/style.css"
import {Calendar} from "react-calendar";
import 'react-calendar/dist/Calendar.css';
import {DateTimeProfile} from "./Month/Clock";
import {UserCertificates} from "./ProfileContent/UserCertificate/UserCertificates";
import {AboutFormUsers} from "./ProfileContent/AboutFormUser/AboutFormUsers";

export const Profile = (props) => {

    const [value, onChange] = useState(new Date());

    if (!props.profile) {
        return <p>Loading...</p>
    }

    return (
        <div>
            <div className="contentProfile">
                <div className="userProfileInfo">

                    <div style={{margin: "20px"}}>
                        <div>
                            <AboutFormUsers {...props} />
                        </div>
                    </div>
                </div>

                <div className="achivements">
                    <div className="achivementsTitleContainer">

                        <div>
                            <div className="achivementsTitle">
                                <h3>Keep on completing achievements and become one of the best coders</h3>

                                <p>The input value should be here</p>
                            </div>
                        </div>
                    </div>

                    <div className={"centerColumnLine"}>
                        <hr/>
                    </div>
                </div>

                <div className="messages">
                    <div className="DateTimeProfile">
                        <DateTimeProfile/>
                    </div>

                    <div>
                        <Calendar onChange={onChange} value={value} className={"Calendar"}/>
                    </div>

                    <div>
                        <UserCertificates/>
                    </div>
                </div>
            </div>
        </div>
    )
}

import React from 'react';
import './css/style.css';

export class AboutFormUsers extends React.Component {

    state = {
        user: '',
    };

    handleChange = (event) => {
        const input = event.target;
        const value = input.value;

        this.setState({ [input.name]: value });
    };

    handleFormSubmit = (event) => {
        localStorage.setItem('user', this.state.user);
        event.preventDefault(); //отменяем отправку формы
    };

    componentDidMount() {
        const user = localStorage.getItem('user');
        this.setState({ user });
    }

    render() {
        return (
            <div className={"aboutFormContainer"}>
                <form onSubmit={this.handleFormSubmit}>
                    <div className={"aboutUser"}>
                        <p>Write about yourself</p>
                    </div>
                    <div>
                        <label>
                            <textarea name="user" className={"textarea"} value={this.state.user} onChange={this.handleChange}/>
                        </label>
                    </div>

                    <div>
                        <button type="submit">Sign In</button>
                    </div>

                </form>
            </div>
        );
    }
}

export const Profile=props=>{
...
常量[inputValue，setInputValue]=useState（“”）；
...
返回(
...
...
不断完成成就，成为最佳之一
编码员
{inputValue}
...
);
};

AboutFormUsers.jsx
import React, {useState} from 'react';
import "./css/style.css"
import {Calendar} from "react-calendar";
import 'react-calendar/dist/Calendar.css';
import {DateTimeProfile} from "./Month/Clock";
import {UserCertificates} from "./ProfileContent/UserCertificate/UserCertificates";
import {AboutFormUsers} from "./ProfileContent/AboutFormUser/AboutFormUsers";

export const Profile = (props) => {

    const [value, onChange] = useState(new Date());

    if (!props.profile) {
        return <p>Loading...</p>
    }

    return (
        <div>
            <div className="contentProfile">
                <div className="userProfileInfo">

                    <div style={{margin: "20px"}}>
                        <div>
                            <AboutFormUsers {...props} />
                        </div>
                    </div>
                </div>

                <div className="achivements">
                    <div className="achivementsTitleContainer">

                        <div>
                            <div className="achivementsTitle">
                                <h3>Keep on completing achievements and become one of the best coders</h3>

                                <p>The input value should be here</p>
                            </div>
                        </div>
                    </div>

                    <div className={"centerColumnLine"}>
                        <hr/>
                    </div>
                </div>

                <div className="messages">
                    <div className="DateTimeProfile">
                        <DateTimeProfile/>
                    </div>

                    <div>
                        <Calendar onChange={onChange} value={value} className={"Calendar"}/>
                    </div>

                    <div>
                        <UserCertificates/>
                    </div>
                </div>
            </div>
        </div>
    )
}

import React from 'react';
import './css/style.css';

export class AboutFormUsers extends React.Component {

    state = {
        user: '',
    };

    handleChange = (event) => {
        const input = event.target;
        const value = input.value;

        this.setState({ [input.name]: value });
    };

    handleFormSubmit = (event) => {
        localStorage.setItem('user', this.state.user);
        event.preventDefault(); //отменяем отправку формы
    };

    componentDidMount() {
        const user = localStorage.getItem('user');
        this.setState({ user });
    }

    render() {
        return (
            <div className={"aboutFormContainer"}>
                <form onSubmit={this.handleFormSubmit}>
                    <div className={"aboutUser"}>
                        <p>Write about yourself</p>
                    </div>
                    <div>
                        <label>
                            <textarea name="user" className={"textarea"} value={this.state.user} onChange={this.handleChange}/>
                        </label>
                    </div>

                    <div>
                        <button type="submit">Sign In</button>
                    </div>

                </form>
            </div>
        );
    }
}

export类AboutFormUsers扩展React.Component{
...
handleChange=事件=>{
常量输入=event.target；
常量值=input.value；
this.setState（{[input.name]：value}）；
this.props.onChangeInput（值）；
};
...
}