我是全新的反應，我有一個有 5 個五個輸入欄位的注冊表單。
我為 TextField 創建了一個功能組件
MyTextField.js
function MyTextField(props) {
return (
<TextField
label={props.label}
name={props.name}
placeholder={props.placeholder}
type={props.type}
onChange={props.handleOnChange}
value={props.value}
></TextField>
)
}
export default MyTextField
注冊.js
function SignUp() {
const [value, setValue] = useState('')
function FunConfirmPassword(event) {
setValue = event.target.value //this function is calling, if I comment this line
console.log('FunConfirmPassword called - password value = ' value)
}
return (
<MyTextField type="text" label="Firstname" name="firstName" placeholder="Enter Firstname"></MyTextField>
<MyTextField type="text" label="Lastname" name="Lastname" placeholder="Enter Lastname"></MyTextField>
<MyTextField type="text" label="emailID" name="emailID" placeholder="Enter emailID"></MyTextField>
<MyTextField type="password" label="password" name="password" placeholder="Enter password"></MyTextField>
<MyTextField handleOnChange={FunConfirmPassword} type="password" label="confirmpassword" name="confirmpassword" placeholder="Enter confirmpassword"></MyTextField>
)
}
我正在嘗試學習如何設定 TextField 的值并獲取相同文本欄位的值。
同時，它必須是可重用的功能
uj5u.com熱心網友回復：
如何設定TextField的值
在您的代碼中，<TextField>從道具獲取其值：
value={props.value}
因此，要提供該值，請將其作為該道具傳遞：
<MyTextField value={value} ...
并獲取相同文本欄位的值
你已經在這里做了：
<MyTextField handleOnChange={FunConfirmPassword} ...
但是，您的處理函式在這里有一個錯誤：
setValue = event.target.value
setValue是一個函式。這應該是：
setValue(event.target.value);
此外，console.log緊隨其后的陳述句不會列印您期望的內容。React 狀態更新是異步和批處理的。要么記錄event.target.value，要么使用 auseEffect回應更新的value值并將其記錄在那里。（或者根本不將它記錄到控制臺，這不是必需的。）
uj5u.com熱心網友回復：
我為您準備了一個 codepen 示例，您可以在其中看到它是如何作業的。
https://codepen.io/dns_nx/pen/BaxjdKd
基本上，您為子組件設定一個屬性，您可以在其中定義子組件呼叫時正在執行的函式（請參閱屬性onChange）。要在MyTextField組件中設定值，您只需將變數的當前值傳遞SignUp給您的MyTextField組件（請參閱屬性value）：
function SignUp(props) {
const [firstName, setFirstName] = useState('');
...
<MyTextField
type="text"
label="Firstname"
name="firstName"
placeholder="Enter Firstname"
value={firstName}
onChange={(event) => setFirstName(event.target.value}
/>
...
}
然后您需要在您的子組件（即onChange事件）中呼叫您需要的函式，以將新值傳遞給父組件（SignUp）。該值由屬性設定value：
function MyTextField(props) {
...
<TextField
...
value={props.value}
onChange={(event) => props.onChange(event)}
...
></TextField>
}
這是將值從子組件傳遞到父組件的方式。
但是隨著您的應用程式變得越來越大，它變得難以處理。因此我建議你使用像 Redux (react-redux) 這樣的狀態管理庫。
https://www.npmjs.com/package/react-redux
并將其與工具包包一起使用
https://www.npmjs.com/package/@reduxjs/toolkit
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/505630.html
標籤：javascript 反应 反应钩子