傳遞輸入值狀態從父元件到子元件的React方法
我有一個父元件，它透過我的陣列進行映射，並列印出各種Child元件的迭代。
我試圖在父元件中存取狀態，但無法弄清楚如何從子元件中提取「inputValue」的正確狀態，並將其放在父元件中。
理想情況下，我希望inputValue和isValidated狀態都存在於父元件中，以便我可以在各種基於表單的函數中使用它們。
父元件：
import React, { useState } from 'react';
import { formFieldsData } from './FormFields';
import Input from './Input';
export default function Form() {
return (
<form>
{formFieldsData.map((item) => (
<Input
key={item.id}
id={item.id}
label={item.label}
type={item.type}
placeholder={item.placeholder}
/>
))}
</form>
)
}
子元件：
import React, { useState } from 'react';
import styles from './forms.module.scss';
import RangeInput from './RangeInput';
export default function Input({ type, id, placeholder = '', label, props }) {
const [inputValue, setInputValue] = useState('');
const [isValidated, setIsValidated] = useState(false);
const isRangeInput = type === 'range';
const handleChange = (e) => {
setInputValue(e.target.value)
if(inputValue.length > 0 || type === 'date') {
setIsValidated(true)
}
}
return (
<div className={styles.form__row}>
<label htmlFor={id}>{label}: {inputValue}</label>
{isRangeInput
? <RangeInput id={id} onChange={(e) => handleChange(e)} />
: <input
required
type={type}
id={id}
name={id}
placeholder={placeholder}
className={styles.input}
value={inputValue}
onChange={(e) => handleChange(e)}
/>
}
<button type="submit" id="formSubmit" onClick={() => alert('button click catched')} disabled={!isValidated}>Submit!</button>
</div>
)
}