React.js : 使用 <span> 在 render() 方法中提交 <form>答案

【问题标题】：React.js : use <span> to submit the <form> inside render() methodReact.js : 使用 <span> 在 render() 方法中提交 <form>
【发布时间】：2017-06-08 18:26:09
【问题描述】：

大家好。

我在 .jsx 组件的 render() 方法中有一个表单和一个表格。我需要使用表中的一个跨度来提交表单并将操作传递给 SpringMVC RestController。

有一些限制：

1) 不幸的是，在这种特定情况下，我无法使用提交或按钮输入类型。

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>
    )
  }
}

我将非常感谢提示如何实现它。提前致谢。

【问题讨论】：

标签： html forms reactjs

【解决方案1】：

您可以为您的span 设置一个onClick 处理程序：

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>
  }
}

【讨论】：