反应js如何将输入值传递给另一个组件

Question

I have a form component named Form.js, I imported this component into Profile.js, I want to transfer the input value from the Form.js component to Profile.js (For a more illustrative example, you can see the picture https://ibb.co/tsRNCR6 ). I have deliberately removed a few lines of code from jsx to shorten the code.

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

AboutFormUsers.jsx

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

Answer 1

You can pass an event callback to AboutFormUsers component. In AboutFormUsers component, call this callback when the input value is changed. Please check below for deail.

Profile.jsx

export const Profile = props => {
  ...
  const [inputValue, setInputValue] = useState('');
  ...

  return (
    <div>
      ...
      <AboutFormUsers {...props} onChangeInput={setInputValue} />

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

        <p>{inputValue}</p>
      </div>

      ...
    </div>
  );
};

AboutFormUsers.jsx

export class AboutFormUsers extends React.Component {
  ...
  handleChange = event => {
    const input = event.target;
    const value = input.value;

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