Question

从react开始，我在父组件中创建了一个输入字段，当用户提交文本时，我将文本传递给子组件并在父组件下打印文本。

父组件代码

import React, { useState } from "react";
import Validate from "./Validate";

function CommandEntry() {
  const [value, setValue] = useState("");
  const handleSubmit = e => {
    e.preventDefault();
    // console.log(value);
    return <Validate value={value} />;
  };
  return (
    <div>
      <form onSubmit={handleSubmit}>
        enter text:~
        <input
          type="text"
          autoFocus
          required
          onChange={e => setValue(e.target.value)}
        />
      </form>
    </div>
  );
}

export default CommandEntry;

子组件的代码

import React from "react";

export default function Validate(props) {
  console.log("I am in child");
  return (
    <div>
      <h1>{props.value}</h1>
    </div>
  );
}

Answer 1

您需要render内的孩子return并在处理程序中设置值。

像这样：

function CommandEntry() {
  const [value, setValue] = useState("");
  const [submit, setSubmitValue] = useState(false);
  const handleChange = e => {
    e.preventDefault();
    setValue(e.target.value); //setting the value on change

  };
  const handleSubmit = e => {
    e.preventDefault();
    setSubmitValue(true); //setting the submit flag to true.
  };
  return (
    <div>
      value &&
      <form onSubmit={handleSubmit}> // submit handler
        enter text:~
        <input
          type="text"
          autoFocus
          required
          onChange={handleChange} // change handler
        />
       {submit && 
        <Validate value={value} /> // rendering the child component 
       }
      </form>
    </div>
  );
}

Answer 2

您不能从处理程序函数中返回JSX元素。处理函数不同，渲染函数也不同。因此，您可以在父组件中更改此设置，仅在./gradlew check为submit时才显示子项。

true

我无法在React中将道具从父母传递给孩子

2 个答案: