代码之家  ›  专栏  ›  技术社区  ›  mogoli

从submit React生成元素。js公司

  •  0
  • mogoli  · 技术社区  · 7 年前

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

    单击“提交”后,我如何获得显示成功标题的任何想法。

    谢谢

    2 回复  |  直到 7 年前
        1
  •  1
  •   Liutong Chen    7 年前

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

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

    我认为html标记返回的原因 handleSubmit 函数中没有显示是因为尽管它返回标记,但它不知道将其放置在何处。如果您想让它工作,您需要使用以下方法 createElement appendChild 但这不是react应该起作用的方式。

        2
  •  1
  •   Max    7 年前

    如果你想 <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>
    );
    }