所以我的 App.js 檔案看起來像這樣：
import React from "react";
import { useState } from "react";
import './App.css';
import Header from "./components/pages/Header";
import NAV from "./NAV";
import Trees from "./components/tree";
function App() {
const [inputField , setInputField] = useState({
first_name: 'Phyag_NZFS3770'
})
const inputsHandler = (e) =>{
setInputField( {[e.target.name]: e.target.value} )
}
const submitButton = () =>{
alert(inputField.first_name)
}
return(
<div className="App">
<NAV genomename={inputField.first_name}/> //this can't be done as the prop value is undefined
<Header title="EumicrobeDB"/>
<h3 style={{ textAlign:"left" }}> Organism List </h3>
<div> <Trees /> </div>
<div>
<input
type="text"
name="first_name"
onChange={inputsHandler}
placeholder="enter the organism id"
value={inputField.first_name}/>
<button onClick={submitButton}>Submit Now</button>
</div>
</div>
)
}
export default App;
任何人都可以修改代碼以將 {inputField.first_name} 作為道具值傳遞給我的名為 NAV 的函式嗎？我處于絕對修復狀態。我是 React 新手的生物學家；誰必須在最后期限前完成
uj5u.com熱心網友回復：
這就是如何將資料從父組件傳遞給子組件的props.
例子
import React from "react";
import { useState } from "react";
const Header = ({ title }) => {
return <React.Fragment>Hello, {title}</React.Fragment>;
};
function App() {
const [inputField, setInputField] = useState({
first_name: "Phyag_NZFS3770"
});
const inputsHandler = (e) => {
console.log([e.target.name] , e.target.value);
setInputField({ [e.target.name]: e.target.value });
};
const submitButton = () => {
alert(inputField.first_name);
};
return (
<div className="App">
<Header title={inputField.first_name} />
<h3 style={{ textAlign: "left" }}> Organism List </h3>
<div>
<input
type="text"
name="first_name"
onChange={inputsHandler}
placeholder="enter the organism id"
value={inputField.first_name}
/>
<button onClick={submitButton}>Submit Now</button>
</div>
</div>
);
}
export default App;
uj5u.com熱心網友回復：
您在此組件中的代碼按原樣看起來不錯。確保您正在訪問props.genomename而不是props.first_name在 NAV 組件中。
如果您打算添加更多輸入欄位，我還建議您更改 inputHandler 函式以與之前的狀態合并，而不是完全替換它：
const inputsHandler = (e) => {
setInputField({ ...inputField, [e.target.name]: e.target.value })
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338465.html
標籤：javascript 反应 反应道具 反应状态