![](/img/trans.png)
[英]React not updating data on parent component after child component form submit
[英]Try to get form data after submit in a React child component but empty screen
我有一个子组件是一个组件形式的问题。 我想将表单数据传递给我的父组件,然后进行Ajax调用。
这是我的父组件
import React, { Component } from 'react';
import { render } from 'react-dom';
import CustomerForm from './customerForm';
import styles from './scss/application.scss';
class App extends React.Component {
constructor() {
super();
this._handleSubmit = this._handleSubmit.bind(this);
}
_handleSubmit(customer) {
alert(customer);
//AJAX
}
render() {
return (
<CustomerForm
handleSubmit={this._handleSubmit}
/>
</section>
);
}
}
render(
<App />,
document.getElementById('root')
);
然后这是CustomerForm我包括的子组件形式:
import React, { Component } from 'react';
class CustomerForm extends Component {
constructor(props) {
super(props);
}
_onSubmit(e) {
e.preventDefault();
var name = this._name.value.trim();
if (!name) {
return;
}
this.props.handleSubmit({name: name, identifier: identifier, cost: cost});
}
render() {
return (
<form onSubmit={this._handleSubmit}>
Name <br/> <input id="name" type="text" name="name"
value={this.state.name}
ref={(input) => this._name = input}/><br/>
<input type="submit" value="Create"/>
</form>
);
}
}
export default CustomerForm
实际上,我的屏幕是空的,我在Web浏览器的Web检查器中看不到任何错误消息,问题出在子组件上。 当我删除父组件时,一切正常。
任何想法? 劳伦斯(Thx Laurent)
您在提交表单时出错,将<form onSubmit={this._handleSubmit}>
更改为<form onSubmit={this._onSubmit}>
。
return (
<form onSubmit={this._onSubmit}>
Name <br/>
<input id="name" type="text" name="name"
value={this.state.name}
ref={(input) => this._name = input}/><br/>
<input type="submit" value="Create"/>
</form>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.