从提交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 Submit方法：

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

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

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

我认为您的函数中的handleSubmit返回的html标记未显示的原因是，尽管它返回了标记，但它不知道将其放置在何处。 如果您想使其工作，则需要使用诸如createElement和appendChild类的方法，但这并不是appendChild应该起作用的方法。