reactjs - 获取 React 子组件中的数据到父组件以进行提交
问题描述
我只是想知道当用户提交时如何获取表单数据我希望能够在 console.log 中看到它这是我的父组件的样子。
class App extends Component {
render() {
return (
<div className="App">
<PageOne />
<PageTwo />
<PageThree />
<PageFour />
<PageFive />
<PageSix />
<Button>
Submit Form
</Button>
<br/>
<br/>
</div>
);
}
}
Page One Component
class PageOne extends Component {
constructor(props){
super(props)
this.state={
generalDetails: '',
phoneNumber: '',
fName: '',
mName: '',
lName: '',
gender: '',
}
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked :
target.value;
const name = target.name;
console.log(`Input name ${name}. Input value ${value}.`);
this.setState({
[name]: value
});
}
render() {
return (
<div className="PageOneWrapper"
style={{
background: '#969fad'
}}
>
<div className="Details">
<h1>CareerTrackers Program Orientation</h1>
<p> Please complete this form to ensure we have your most up-to-date contact details. </p>
<Form>
<TextArea
onChange={this.handleInputChange}
name="generalDetails"
placeholder='General Details'
style={{
width: 500,
minHeight: 50
}}
/>
</Form>
<br/>
<p style={{
marginRight: 600
<Input
onChange={this.handleInputChange}
name='fName'
placeholder='First Name'
/>
<Input
onChange={this.handleInputChange}
name='mName'
placeholder='Middle Name'
style={{
marginLeft: 50,
marginRight: 50
}}
/>
<Input
onChange={this.handleInputChange}
name='lName'
placeholder='Last Name'
/>
<br/><br/><br/>
<p
style={{
display: "inline",
marginRight: 480
}}
><strong>Gender: </strong>
</p>
<select
name='gender'
onChange={this.handleInputChange}
style={{
display: "inline",
}}
>
<option>Select Gender </option>
<option>Male </option>
<option>Female </option>
<option>Other </option>
</select>
<br/><br/><br/>
<p style={{
marginRight: 600
}}><strong>Email:</strong></p>
<Input
onChange={this.handleInputChange}
name='email'
placeholder='Email'
style={{
marginRight: 470,
}}
/>
<br/>
<br/>
<Input
onChange={this.handleInputChange}
name='confirmEmail'
placeholder='Confirm Email'
style={{
marginRight: 470,
}}
/>
<br/>
<br/>
<p style={{
marginRight: 540
}}><strong>Phone Number:</strong></p>
<Input
onChange={this.handleInputChange}
name='phoneNumber'
placeholder='Phone Number'
style={{
marginRight:370,
}}
/>
<select
onChange={this.handleInputChange}
name='Mobile Type'
style={{
MarginRight: 5000
}}
>
<option>Mobile Type</option>
<option>Mobile</option>
<option>Work</option>
<option>Home</option>
</select>
<br/>
<br/>
<br/><br/><br/>
</div>
</div>
);
}
}
export default PageOne;
解决方案
const handleChange=(data)=>{console.log(data)}
将此功能添加到您的父组件。
将此函数传递给您的子组件,例如<PageOne handleChane={handleChange}/>
您现在可以通过 props 访问子组件中的功能。
调用类似的函数onSubmit={this.props.handleChnage()}
并将所需的数据作为参数传递。
如果子组件中没有提交按钮,则需要onChange
在父组件中定义每个句柄函数,并将它们传递给相应的子组件,如前所述。然后你在你的父组件中获取表单元素的值。
推荐阅读
- terraform - terraform 远程状态文件的“私有”属性是做什么用的?
- node.js - 使用 graphql 发出更新请求
- c# - 如何解决错误 CS0229 '_FormEvents_Event.Filter' 和 '_Form3.Filter' 之间的歧义
- amazon-web-services - 如何远程连接到 AWS Elasticsearch?
- javascript - 添加更多输入的唯一名称
- javascript - Parent 中的 AddEventListener 和 iframe 中的 postMessage 不能一起工作
- python - 带正则表达式的 read_csv
- php - Twilio:在浏览器中同时接收同一 Twilio 号码的多个来电
- python - 从 celery 导入 current_app 会给出 ValueError:尝试相对导入超出顶级包
- python - 数据包含特定格式的错误读数