在 React 中将子表单的数据传递给父（App）

Question

我正在尝试构建应用程序，但现在卡住了我想将数据（nameOwner、locationOwner、plantsOwner、startDateOwner、endDateOwner）从子表单传递到其父表单 (App)

如何在不在我的应用程序中复制表单的情况下实现这一点？

这是儿童表格

function PlantOwnerForm(props)  {

  const [nameOwner , setNameOwner] = React.useState('');
  const [locationOwner , setLocationOwner] = React.useState('');
  const [plantsOwner , setPlantsOwner] = useState(0);
  const [startDateOwner, setStartDateOwner] = useState('');
  const [endDateOwner, setEndDateOwner] = useState('');
      
//Handle change for town and radius
  function handleChange(event) {
    // console.log('event: ', event)
    // console.log(event.target.value)
    switch (event.target.name) {
      case "name":
        setNameOwner(event.target.value);
        break;
      case "plants":
        setPlantsOwner(event.target.value);
        break;
      case "location":
        setLocationOwner(event.target.value);
        break;
      default:
        break;
    }
 }

// Submitting the form
  function handleSubmit(event) {
      event.preventDefault();
      console.log(
      `A request has been logged: 
      From ${nameOwner} in ${locationOwner} for ${plantsOwner} plant(s) from ${startDateOwner} to ${endDateOwner}
      `);
      props.parentCallback(nameOwner)
      setLocationOwner("");
      setNameOwner("");
      setPlantsOwner(0);
      setStartDateOwner("");
      setEndDateOwner("");
  }

 
    return (
      <div>
        <form onSubmit={handleSubmit}> 
          <BasicInfoForm
            name={nameOwner}
            handleChange = {handleChange}
            location = {locationOwner}
            addPlant = {addPlant}
            removePlant = {removePlant}
            plants={plantsOwner}
          />
         
          <Calendar
            startDate={ startDateOwner }
            endDate={ endDateOwner }
            handleChangeDates={ handleChangeDates }
          />
          <button> Let's find my Plant-Sitter !</button>
       </form>
      </div>
    )
}

export default PlantOwnerForm;

这是父

function App() {

  // to get the data from PO form
  function handleOwnerData(nameOwner) {
    console.log(`data: ${nameOwner}`)
    }

  return (
    <div>
 
          <PlantOwnerForm parentCallback={handleOwnerData} />
 
    </div>
  );
}

如何只从表单中获取数据而不是整个表单？

非常感谢:)

Answer 1

有两种方法可以将数据传递给你的 parent，使用状态管理（这意味着你有一个可以从任何地方访问的通用状态。例如 redux）或提升状态（你的方式做到了）。正确的方法是从 PlantOwnerForm 中获取所有使用状态，将它们放入应用程序中，然后在提交时您需要在 parent 组件中设置状态。像这样：

function PlantOwnerForm(props)  { 
  function handleChange(event) { //Handle change for town and radius
    props.onChange(event)
 }

// Submitting the form
  function handleSubmit(event) {
      event.preventDefault();
      console.log(
      `A request has been logged: 
      From ${nameOwner} in ${locationOwner} for ${plantsOwner} plant(s) from ${startDateOwner} to ${endDateOwner}
      `);
      props.onSubmit(event) // you pass the data from the submit to the parent
  }
  
  return (
      <div>
        <form onSubmit={handleSubmit}> 
          <BasicInfoForm
            name={nameOwner}
            handleChange = {handleChange}
            location = {locationOwner}
            addPlant = {addPlant}
            removePlant = {removePlant}
            plants={plantsOwner}
          />
         
          <Calendar
            startDate={ startDateOwner }
            endDate={ endDateOwner }
            handleChangeDates={ handleChangeDates }
          />
          <button> Let's find my Plant-Sitter !</button>
       </form>
      </div>
    )
}

export default PlantOwnerForm;

然后在应用程序中：

function App() { //initialise useState()
  function handleOwnerData(event) {
    // set the state here
    }

function handleChange(event) {// handle the changes}
   return (
    <div>
        <PlantOwnerForm onChange(handleChange) onSubmit={handleOwnerData} />
    </div>
  );
}

在 React 中将子表单的数据传递给父（App）

Passing data of a Child's form to Parent (App) in React

javascript

parent-child

reactjs