Javascript 从submit React.js生成元素

我想生成一些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>

);
}
}

handleSubmit（事件）{
console.log（this.state.lessonTime）
event.preventDefault（）；
this.setState（{'success'：true}）
返回(
成功
);
}
render（）{
返回(








);
}
}

点击“提交”后，我如何获得成功标题的任何想法

如果希望在成功完成后渲染

元素而不是表单，请在渲染函数中执行以下操作，谢谢

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>
);
}

render（）{
返回(
{这个州成功了吗(
成功
):(







）}
);
}

如果希望在成功完成时渲染

元素而不是表单，请在渲染函数中执行以下操作：

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>
);
}

render（）{
返回(
{这个州成功了吗(
成功
):(







）}
);
}

我认为更好的处理方法是使用state来控制“success”标题的呈现。可以将以下代码行添加到要添加标题的位置：

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

{this.state.success&&Successful}

---

我认为函数中

handleSubmit

返回的html标记没有显示的原因是，尽管它返回了标记，但它不知道将其放置在何处。如果你想让它工作，你需要使用像

createElement

和

appendChild

这样的方法，但这不是react应该工作的方式。

我认为更好的处理方法是使用state来控制“success”标题的呈现。可以将以下代码行添加到要添加标题的位置：

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

{this.state.success&&Successful}

我认为函数中

handleSubmit

返回的html标记没有显示的原因是，尽管它返回了标记，但它不知道将其放置在何处。如果您想让它工作，您需要使用像

createElement

和

appendChild

这样的方法，但这不是react应该工作的方式