如何使用 REACTJS 中的道具将一个组件的输入值显示给另一个组件？

Question

这是一个简单的项目，我想将firstComponent 的输入值显示给另一个组件（ secondComponent ），但我无法显示另一个组件。 现在，我需要建议来做这个项目，我在下面给出了代码，

应用程序.js：

import React from 'react';
import './App.css';
import First from './components/firstComponent';
import Second from './components/secondComponent';

function App() {
return (
<div className="App">
<br/><br/>
<First />
<hr/> <hr>
<Second/>
</div>
);
}

export default App;

第一个组件.jsx：

import React from 'react';

const firstComponent = ()=> {
function handleChange(event) {
const inputValue = event.target.value;
console.log(inputValue);
}
return (
<div>
<h1><u>First Component</u> </h1>
<input type="text" style={{ width: "500px", height:"30px" }} onChange={handleChange}/>
</div>
)
}

export default firstComponent

;

secondComponent.jsx：

import React from 'react';

const secondComponent = (props) => {
return (
<div>
  <h1><u>Second Component</u> </h1>
  <h4>{this.props.inputValue}</h4>
</div>
)
}

export default secondComponent;

注意：我在附件部分附上了output页面，请关注。

Answer 1

请尝试下面给出的代码。 这有望满足您的要求。

应用程序.js

import FirstComponent from './FirstComponent'
const App = () => {
    return ( 
       <>
        <FirstComponent / >
        </>
    )
}

export default App

FirstComponent.js

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

function FirstComponent() {
  const [inputData, setInputData] = useState();

  return (
    <>
      <div>
        <h1>
          <u>First Component</u>{" "}
        </h1>
        <input
          type="text"
          style={{ width: "500px", height: "30px" }}
          onChange={(e) => setInputData(e.target.value)}
        />
        <br />
        <SecondComponent inputValue={inputData} />
      </div>
    </>
  );
}
export default FirstComponent;

SecondComponent.js

import React from 'react';

const secondComponent = (props) => {
return (
<div>
  <h1><u>Second Component</u> </h1>
  <h4>{props.inputValue}</h4>
</div>
)
}

export default secondComponent;