从提交生成元素 React.js

Question

我想生成一些 HTML 以显示表单提交成功。我似乎无法在 handleSubmit 方法中做到这一点。

class BookingForm extends Component{
...


handleChange(event) {
 const target = event.target;
 const value = target.value;
 const name = target.name;
 console.log(name + ' '+value);
 this.setState({
  [name]: value
 });
}

提交我要渲染的方法html:

handleSubmit(event) {
console.log(this.state.lessonTime)
event.preventDefault();
this.setState({'success':true})
return(
  <h1>Success</h1>
);

}

render() {
return (
  <div>
  <form onSubmit={this.handleSubmit}>
  <TimeList defaultTime={this.state.defaultTime}
            handleChange={this.handleChange}/>
  <br/>
  <DateList defaultDate={this.state.defaultDate}
            handleChange={this.handleChange}/>
  <br/>
  <NumberOfLessons defaultNOL={this.state.defaultLessons}
            handleChange={this.handleChange}/>
  <br/>
    <input type="submit" value="Book Lesson" />
  </form>
  <br/>

  </div>

);
}
}

关于如何在点击提交后显示成功标题的任何想法。

谢谢

Answer 1

如果您希望 <h1> 元素在成功完成时渲染而不是表单，请在渲染函数中执行此操作：

render() {
return (
  <div>
   {this.state.success?(
    <h1>Success</h1>
   ):(
   <form onSubmit={this.handleSubmit}>
   <TimeList defaultTime={this.state.defaultTime}
            handleChange={this.handleChange}/>
  <br/>
  <DateList defaultDate={this.state.defaultDate}
            handleChange={this.handleChange}/>
  <br/>
  <NumberOfLessons defaultNOL={this.state.defaultLessons}
            handleChange={this.handleChange}/>
  <br/>
    <input type="submit" value="Book Lesson" />
  </form>
  <br/>)}
  </div>
);
}

Answer 2

我认为处理此问题的更好方法是使用状态来控制 "success" 标题的呈现。你可以在你想添加header:

的地方添加下面这行代码

{this.state.success && <div> Successful </div> }

我认为 handleSubmit 在你的函数中返回的 html 标签没有显示的原因是虽然它 returns 标签，但它不知道在哪里把它。如果你想让它工作，你需要使用像 createElement 和 appendChild 这样的方法，但这不是反应应该工作的方式。

从提交生成元素 React.js

Generate element from submit React.js

javascript

submit

reactjs