[英]Render Data From Form on Submission in React
Not sure what I'm doing wrong here- this should be really simple, but I can't find the info I'm looking for. 不知道我在这里做错了什么 - 这应该很简单,但我找不到我正在寻找的信息。
I have a form component and I'm trying to be able to render another component, which is passed props from the form ONLY upon submit. 我有一个表单组件,我试图能够呈现另一个组件,只有在提交时才从表单传递道具。 As of right now, the component re-renders on handleChange but does not wait for handleSubmit. 截至目前,该组件在handleChange上重新渲染,但不等待handleSubmit。
class UserInfo extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<h4>{this.props.name}</h4>
</div>
)
}
}
class SearchForm extends React.Component {
constructor(props) {
super(props)
this.state = {name: ''}
this.handleChange= this.handleChange.bind(this);
this.handleSubmit= this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ name: event.target.value })
}
handleSubmit(event) {
event.preventDefault();
this.setState({ name: this.state.name})
alert(this.state.name + ' was submitted');
}
renderUserInfo() {
return <UserInfo name={this.state.name} />
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Username:
<input type="text" name={this.state.name} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
{this.renderUserInfo()}
</div>
)
}
}
Worth noting, this is a simplified version of my problem and I will need "UserInfo" component to be a container eventually, hence the reason for making it a smart component. 值得注意的是,这是我的问题的简化版本,我将最终需要“UserInfo”组件作为容器,因此使其成为智能组件的原因。
Since you're updating the name
onChange, the react re-renders the entire component. 由于您正在更新name
onChange,因此react会重新呈现整个组件。 You can use a submitted
flag to check whether the info is submitted or not. 您可以使用submitted
标志来检查信息是否已提交。
class SearchForm extends React.Component {
constructor(props) {
super(props)
this.state = {
name: '',
submitted: false }
this.handleChange= this.handleChange.bind(this);
this.handleSubmit= this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ name: event.target.value })
}
handleSubmit(event) {
event.preventDefault();
this.setState({ submitted: true })
alert(this.state.name + ' was submitted');
}
renderUserInfo() {
return <UserInfo name={this.state.name} />
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Username:
<input type="text" name={this.state.name} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
{this.state.submitted && this.renderUserInfo()}
</div>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.