我正在尝试将文本区域的值从reactjs中的某个组件传递到另一个react组件中使用。组件值存储在useState
钩子中的第一个组件中,因此我希望在另一个组件中访问它并围绕它运行map()
函数。这在React中是可能的吗?我不想把所有内容都放在app.js中,因为这只是我不想要的纯HTML。我想改用reactjs函数组件?
第一个组件:
import React, { useState, useRef, useEffect } from "react";
function Firstcomp() {
const [quotes, setQuotes] = useState(["hi there", "greetings"]);
const reference = useRef();
function sub(event) {
event.preventDefault();
setQuotes((old) => [reference.current.value, ...old]);
console.log(quotes);
return;
}
return (
<>
<div>
<div>
<div>
<h4>jon snow</h4>
</div>
<form onSubmit={sub}>
<textarea
type="textarea"
ref={reference}
placeholder="Type your tweet..."
/>
<button type="submit">Tweet</button>
</form>
{quotes.map((item) => (
<li key={item}>{item}</li>
))}
{/* we can use card display taking item as prop where it
will do the job of filling the <p> in card entry */}
</div>
</div>
</>
);
}
export default Firstcomp;
第二组件
import React from "react";
function SecondComp(props) {
return (
<div>
<p>{props.message}</p>
</div>
);
}
export default Secondcomp;
2条答案
按热度按时间gopyfrb31#
使用全局管理状态,如反冲、复制或上下文
juzqafwq2#
在上面的例子中,我们使用useContext钩子来提供一个全局变量“Value”,即使它没有在User组件中直接声明,但您可以通过调用useContext钩子来使用它。
在本例中,User组件中的返回值是“Reed”