2017-10-16 35 views
3

如何“添加节”按钮的工作实际上不告诉它调用提交功能时clicked.Here的形式我需要JSX形式如何工作

render(){ 
     return(
      <form onSubmit={this.submit}> 
       <label htmlFor="resort">Resort Name</label> 
       <input id="resort" type="text" defaultValue={this.props.resort} ref="resort" required/> 

       <label htmlFor="date">Date</label> 
       <input id="date" type="date" defaultValue={this.props.date} ref="date" required/> 

       <div> 
       <input id="rainy" type="checkbox" defaultChecked={this.props.rainy} ref="rainy" /> 
       <label htmlFor="rainy" class="weather" >Rainy Day</label> 
       </div> 

       <div> 
       <input id="sunny" type="checkbox" defaultChecked={this.props.sunny} ref="sunny" /> 
       <label htmlFor="sunny" class="weather" >Sunny Day</label> 
       </div> 

       <button>Add Day</button> 
      </form> 
      ) 
    } 

的解释,这里是提交功能

submit(e){ 
     e.preventDefault(); 

     this.refs.resort.value=''; 
     this.refs.date.value=''; 
     this.refs.rainy.value=false; 
     this.refs.sunny.value=false; 

    } 

请我需要一个很好的解释如何按钮仍然像这样调用提交功能。

+1

'type = submit'是'button'的默认值 –

回答

4

这是不相关的,一般特别,但更应对HTML:

你有<form onSubmit={this.submit}>这意味着每当提交表单提交函数将被调用。例如,如果按下回车键或单击窗体中的第一个按钮,就会发生这种情况。

此处了解详情:How is the default submit button on an HTML form determined?

1

在上面的答复中提到@klugjo,这是不是一个关于JSX的问题,但更基本的HTML知识

知道的重要组成部分这里是如何形成的标签的作品以及它的孩子如何表现。主要回答你的问题是form标签和button标签虽然有一些东西在它失踪

基本上都采用下面

<form onSubmit={this.handleSubmit}> 
    // your code here 
    <button type="submit">Add Day</button> 
</form> 

与类型的按钮元素的例子提交总会引发的onsubmit事件在其父窗体上(或执行表单中指定的操作)。您可以阅读更多关于HTML表单的信息here

相关问题