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

Question

我有一个名为Form.js的表单组件，我将这个组件导入到Profile.js中，我想将Form.js组件中的输入值传递给Profile.js（更说明性的例子可以看图https： //ibb.co/tsRNCR6）。为了缩短代码，我特意从 jsx 中删除了几行代码。

配置文件.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>
    )
}

关于FormUsers.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>
        );
    }
}

标签： javascriptreactjsformsreduxcomponents

Answer 1

您可以将事件回调传递给AboutFormUsers组件。在AboutFormUsers组件中，当输入值改变时调用这个回调。请在下面查看详细信息。

配置文件.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>
  );
};

关于FormUsers.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);
  };
  ...
}