所以我有一個 Operations.js 組件，它在父組件（ParamsForm.js）中的特定按鈕被切換時呈現。現在我想要的是，當父組件中的表單被提交時，我希望父組件表單欄位的資料以及子組件表單欄位的資料能夠登錄到控制臺。有沒有辦法做到這一點？？？
引數表單.js
import React, { useState, useEffect } from 'react'
import { Form } from 'react-bootstrap'
import styles from '../style.module.css'
import Operations from './Operations'
const ParamsForm = () => {
const[isToggled,setIsToggled] = useState(false)
return (
<div className={styles.paramFormsContainer}>
<Form>
<button className={styles.paramFormsBtn}>http://localhost:3000/</button>
<input style={{flex : 1 }} type="text"></input>
<button type='button' onClick={()=>setIsToggled(!isToggled)} className={styles.pathParamFormsBtn}>Path Params</button>
{isToggled && <Operations></Operations>}
</Form>
</div>
)
}
export default ParamsForm
Operations.js
import React, { useEffect, useState } from 'react'
import styles from '../style.module.css'
import {FaInfo,FaFileInvoiceDollar} from 'react-icons/fa'
import ReactTooltip from "react-tooltip";
const Operations = () => {
const[isToggled,setIsToggled] = useState(true)
const[paramsList,setParamsList] = useState([{params: ""}])
useEffect(()=>{
console.log(paramsList)
console.log(isToggled)
},[isToggled])
const handleParamAdd = () =>{
setParamsList([...paramsList,{params:""}])
}
const handleParamRemove = (index) =>{
const list = [...paramsList]
list.splice(index,1)
setParamsList(list)
}
const handleParamsChange = (e,index)=>{
const{name,value} = e.target
const list = [...paramsList]
list[index][name] = value
setParamsList(list)
}
return (
<div >
<div className={styles.operationsBtnContainer}>
</div>
{isToggled && paramsList.map((singleParam,index)=>(<div key={index} className={styles.pathParamsFormParentContainer}>
<div className={styles.pathParamsFormChildContainer}>
<form>
<input name='name' value={singleParam.name} onChange={(e)=>handleParamsChange(e,index)} placeholder="Name..." style={{flex : 1 }} type="text"></input>
<select>
<option>any</option>
<option>string</option>
<option>number</option>
<option>integer</option>
<option>array</option>
</select>
<input placeholder="Description..." style={{flex : 1 }} type="text"></input>
{/* <button><FaFileInvoiceDollar></FaFileInvoiceDollar></button> */}
<button data-tip data-for="requiredTip"><FaInfo></FaInfo></button>
<ReactTooltip id="requiredTip" place="top" effect="float">
required
</ReactTooltip>
<button type='button' className={styles.addParamsBtn} onClick={handleParamAdd}><span>Add Parameter</span></button>
<button type='button' className={styles.removeParamsBtn} onClick={()=>handleParamRemove(index)}><span>Remove Parameter</span></button>
</form>
</div>
</div>)) }
</div>
)
}
export default Operations
uj5u.com熱心網友回復：
父組件表單中沒有提交按鈕，所以提交的時候不能做任何事情。
在此處了解如何將表格的答案置于狀態
我會將每個答案存盤在父組件中自己的狀態變數中，并通過道具將孩子所需答案的狀態集函式傳遞給孩子。然后，您可以通過子組件中的這些函式設定狀態，并且父組件將已經將狀態存盤在那里。
為每個答案創建一個新的狀態
const [answers, setAnswer1] = useState("default")
通過 props 將狀態傳遞給子組件
首先，將子組件函式的引數更改為({setAnswer1, setAnswer2, etc...})
然后將道具傳遞給孩子
<Operations setAnswer1={setAnswer1} setAnswer2={setAnswer2} etc.../>
處理輸入更改，將其粘貼到父子組件中
handleInputChange(event, setStateCallback) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
setStateCallback(value)
}
將此函式傳遞給每個輸入，在父組件和子組件中執行相同的操作
<input onChange={(event) => handleInputChange(event, setAnswer1)}/>
畢竟，您已準備好處理提交事件
將此函式復制到父組件中
handleSubmit(event){
event.preventDefault()
console.log("answer 1's state: ", answer1)
console.log("answer 2's state: ", answer2)
// And so on for each piece of state
}
以上不是最干凈的解決方案，但它有效。您可以查看一個 for 回圈，該回圈采用一組狀態變數并列印值或類似的東西。
您還需要onSubmit={handleSubmit}在父組件中添加表單組件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/497476.html
標籤：javascript 反应 用户界面 前端
下一篇：如何在顫動中創建這條曲線？