React.js：使用<span>提交<form>裏面的render（）方法

Question

大家好日子。

我在.jsx組件的render（）方法內部有一個表單和一個表。 而我需要使用span中的一個span來提交表單並將action傳遞給SpringMVC RestController。

有一些侷限：

1）Unfotrunately我不能使用這個特定發生提交或按鈕輸入類型。

2）我也不能使用JQuery。

組件代碼

export default class MyClass extends Component { 
 
    
 
    render() { 
 
    let rootUrl = '../rest'; 
 
    
 
    return (
 
     
 
     <form action={rootUrl + "/books/genres/genre"} method="get" name="bookForm" id="bookForm"> 
 
     <table className="table table-striped table-bordered margin-top-5"> 
 
      <tbody> 
 
       <td className="vertical-align-middle"><small>Book Title</small></td> 
 
       <td className="vertical-align-middle"><small>Author</small></td> 
 
       <td className="vertical-align-middle"><small>Year</small></td> 
 
       <!-- This span must submit the form --> 
 
        <td className="vertical-align-middle"><span className="link-style" >Submit</span></td> 
 
        </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </form> 
 
     </div> 
 
    ) 
 
    } 
 
}

我會很感激提示如何實現它。 在此先感謝。

Answer 1

你可以設置一個onClick處理您span：

class MyClass extends Component { 
    constructor(super){ 
    this.handleClick = this.handleClick.bind(this) 
    } 
    handleClick(evt){ 
    //submit your form 
    } 

    render() { 
    //rest of your code 
    <td className="vertical-align-middle"> 
    <span className="link-style" onClick={this.handleClick}>Submit</span> 
    </td> 
    } 
}