javascript - 从提交 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

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

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

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