2017-10-16 38 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

相關問題