在 Next.js 中将变量从子组件传递到父组件

Question

我有 2 个组件 home 和 tiny tiny 被导入 home 正如你在代码中看到的我正在尝试将 value.toString("html") 从 tiny.js 传递到 home.js 如果这不可能，至少帮助我将 tiny 和 home 组件集成为一个对象，这样我就不必将值作为 props 传递给父组件

import React from "react";
import Tiny from "./tiny";

function Home({ data }) {
  const [Questions, setQuestions] = useState();
  const [deatils1, setdeatils] = useState();

  function clickQuestion() {
    axios
      .post("https://askover.wixten.com/questionpost", {
        Name: Questions,

        Summary: deatils1,//pass tiny value as summery

       
      })
      .then(() => {
        window.location.reload();
      });
  }
  function question(e) {
    setQuestions(e.target.value);
   
  }

  return (
    <>
      <div>
        <div className="container search-box">
          <Form>
            <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
              <Form.Label>Title</Form.Label>
              <Form.Control
                type="text"
                onChange={question}
                placeholder="ask anything?"
              />
            </Form.Group>
            <Tiny />  //tiny component
          </Form>

          
          <Button
            type="submit"
            disabled={!deatils1 || !Questions}
            onClick={clickQuestion}
            variant="outline-secondary"
            id="button-addon2"
          >
            ask?
          </Button>
        </div>
      </div>
    </>
  );
}

tiny.js

import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
import PropTypes from "prop-types";
//import the component
const RichTextEditor = dynamic(() => import("react-rte"), { ssr: false });

const MyStatefulEditor = ({ onChange }) => {
  const [value, setValue] = useState([]);
  console.log(value.toString("html"));

  useEffect(() => {
    const importModule = async () => {
      //import module on the client-side to get `createEmptyValue` instead of a component
      const module = await import("react-rte");
      console.log(module);
      setValue(module.createEmptyValue());
    };
    importModule();
  }, []);

  const handleOnChange = (value) => {
    setValue(value);
    if (onChange) {
      onChange(value.toString("html"));
    }
  };

  return <RichTextEditor value={value} onChange={handleOnChange} />;
};

MyStatefulEditor.propTypes = {
  onChange: PropTypes.func,
};

export default MyStatefulEditor;

Answer 1

实际上，您在tiny中已经有onChange事件，所以您只需要将另一个onChange事件从home传递给tiny即可。

import React from "react";
import Tiny from "./tiny";

function Home({ data }) {
  const [Questions, setQuestions] = useState();
  const [details, setDetails] = useState();

  function clickQuestion() {
    axios
      .post("https://askover.wixten.com/questionpost", {
        Name: Questions,

        Summary: details,//pass tiny value as summery

       
      })
      .then(() => {
        window.location.reload();
      });
  }
  function question(e) {
    setQuestions(e.target.value);
   
  }

  return (
    <>
      <div>
        <div className="container search-box">
          <Form>
            <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
              <Form.Label>Title</Form.Label>
              <Form.Control
                type="text"
                onChange={question}
                placeholder="ask anything?"
              />
            </Form.Group>
            <Tiny onChange={(value) => setDetails(value)}/>  //tiny component
          </Form>

          
          <Button
            type="submit"
            disabled={!deatils1 || !Questions}
            onClick={clickQuestion}
            variant="outline-secondary"
            id="button-addon2"
          >
            ask?
          </Button>
        </div>
      </div>
    </>
  );
}

在 Next.js 中将变量从子组件传递到父组件

passing a variable from child component to parent component in Next.js

reactjs

next.js