所以我正在為聯系表單制作一個 ReactJS 組件。現在我想創建一個從 JSX 中的輸入獲取值的方法，然后我想在另一個檔案中獲取該方法從組件外部回傳的值。這可能嗎？
我的組件檔案：
//Inporting React.
import React from 'react';
//Creating the contactForm Component
class ContactForm extends React.Component{
render(){
return (
<form onSubmit={this.props.submit} className={this.props.formclass} id={this.props.formid}>
<div className='inputDiv'>
<input type="text" name="nameinput" placeholder="Name" id={this.props.nameinputid} className={this.props.nameinputclass} />
<input type="email" name="emailinput" placeholder="Email" id={this.props.emailinputid} className={this.props.emailinputclass} />
<br/>
<input type="text" name="subjectinput" placeholder="Subject" id={this.props.subjectinputid} className={this.props.subjectinputclass} />
<br/>
<input type="text" name="messageinput" placeholder="Message" id={this.props.messageinputid} className={this.props.messageinputclass} />
<br/>
</div>
<br/>
<br/>
<br/>
<input type="submit" className={this.props.submitbtnclass} id={this.props.submitbtnid}/>
</form>
)
}
}
ContactForm.defaultProps = {
submit: "sendEmail()",
formclass: "formClass",
formid: "formId",
nameinputid: "nameInputId",
nameinputclass: "nameInputClass",
emailinputid: "emailInputId",
emailinputclass: "emailInputClass",
subjectinputid: "subjectInputId",
subjectinputclass: "subjectInputClass",
messageinputid: "messageInputId",
messageinputclass: "messageInputClass",
submitbtnclass: "submitBtnClass",
submitbtnid: "submitBtnId"
}
export default ContactForm
我要獲取值的檔案：
import logo from './logo.svg';
import './App.css';
import ContactForm from './contactForm.js'
function App() {
return (
<ContactForm />
);
};
export default App;
uj5u.com熱心網友回復：
如果您希望父組件能夠訪問子組件中變數的值，請考慮將狀態提升到父組件。
假設您要在父組件中訪問的值是用戶名，在ContactForm. 要實作這一點，首先將變數初始化為父組件中的狀態變數：
const [name, setName] = useState('')
使用狀態檔案
然后，將必要的值作為道具傳遞給您的子組件：
<ContactForm name = {name} setName = {setName} />
組件和道具檔案
在您的子組件中，解構道具：
const { name, setName } = props
最后，在您的子組件中，將formonSubmit更改為setName使用用戶輸入進行呼叫。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/472966.html
標籤：javascript 反应