如何在 React 中将动态值从父级传递给子级？

Question

所以我的 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 新手的生物学家； 谁必须在最后期限前完成

Answer 1

这就是您如何将数据从父组件作为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;

Answer 2

您在此组件中的代码按原样看起来不错。 确保您正在访问 NAV 组件中的props.genomename而不是props.first_name 。

如果您打算添加更多输入字段，我还建议您更改 inputHandler 函数以与之前的状态合并，而不是完全替换它：

const inputsHandler = (e) => {
    setInputField({ ...inputField, [e.target.name]: e.target.value })
}