反应更新状态显示其他组件答案

【问题标题】：React update state showing other component反应更新状态显示其他组件
【发布时间】：2020-06-16 13:47:05
【问题描述】：

我有反应表单状态。提交表单后，我想将输入值发送到其他组件，然后显示给浏览器。我成功提交了表单，但是当我将 porps 发送到其他组件时。它不显示任何内容。

这是我的英雄组件

import React from "react";
import "./App.css";
import Show from "./Show";

function App() {
  const [state, setState] = React.useState({
    input: " ",
    text: " "
  });

  const changeHandler = e => {
    setState({ ...state, [e.target.id]: e.target.value });
  };
  const handleSubmit = e => {
    e.preventDefault();
    console.log(state);
    return <Show show={state} />; //this is the component where I am sending props
  };

  return (
    <React.Fragment>
      <div className="row">
        <form className="col s12" onSubmit={handleSubmit}>
          <div className="row">
            <div className="input-field col s3">
              <input
                id="input"
                type="text"
                data-length="4"
                onChange={changeHandler}
              />
              <label htmlFor="input_text">Input text</label>
            </div>
          </div>
          <div className="row">
            <div className="input-field col s8">
              <textarea
                id="text"
                className="materialize-textarea"
                data-length="120"
                onChange={changeHandler}
              ></textarea>
              <label htmlFor="textarea2">Right your text</label>
            </div>
          </div>
          <button
            className="btn waves-effect blue lighten-1"
            type="submit"
            name="action"
          >
            Submit
          </button>
        </form>
        <Show /> //After submit the form I want to show to the browser
      </div>
    </React.Fragment>
  );
}

export default App;

这是我的子组件。

import React from "react";

export default function Show({ show }) {
  return (
    <div>
      {show ? (
        <ul>
          <li>{show.input}</li>
          <li>{show.text}</li>
        </ul>
      ) : null}
    </div>
  );
}

ps：忽略此消息。我需要上传此帖子。多写点？？？？

【问题讨论】：

“忽略此消息”是什么意思？

标签： reactjs forms components

【解决方案1】：

调用方法错误

handleSubmit 是事件活动调用。它不是组件
handleSubmit 组件里面返回不对一个

所以最好在父片段内的Show 组件上传递状态值

const handleSubmit = e => {
    e.preventDefault();
    console.log(state);
  };


return (
    <React.Fragment>
      <div className="row">
        <form className="col s12" onSubmit={handleSubmit}>
          <div className="row">
            <div className="input-field col s3">
              <input
                id="input"
                type="text"
                data-length="4"
                onChange={changeHandler}
              />
              <label htmlFor="input_text">Input text</label>
            </div>
          </div>
          <div className="row">
            <div className="input-field col s8">
              <textarea
                id="text"
                className="materialize-textarea"
                data-length="120"
                onChange={changeHandler}
              ></textarea>
              <label htmlFor="textarea2">Right your text</label>
            </div>
          </div>
          <button
            className="btn waves-effect blue lighten-1"
            type="submit"
            name="action"
          >
            Submit
          </button>
        </form>
        <Show show={state} /> //pass state directly
      </div>
    </React.Fragment>
  );

【讨论】：