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

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

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

我认为函数中handleSubmit返回的html标记未显示的原因是因为虽然它返回了标记，但它不知道放在哪里。如果你想让它发挥作用，你需要使用像createElement和appendChild这样的方法，但这不是反应的方式。

从提交React.js生成元素

2 个答案: