Question

我需要触发从按钮事件处理程序到固定URL 的reactjs表单提交。

到目前为止，我已经看到 SO 个示例，例如submit类型的按钮提交表单here

并带有事件处理程序类型button和onClick的按钮，这似乎需要具有onSubmit事件处理程序的表单（请参见下面的示例）

With submit button inside form 正在工作！

  render(){
  return(
     <div>
         <form id="form1" method="post" action="http://localhost:3000/">
             <label>
                 Name:
                 <input type="text" name="name" enctype='text/plain' value={this.state.data}  />
                 <button type="submit">Submit inside form</button>
             </label>
         </form>

With submit button and eventhandler 也在工作！

         <form id="form3" method="post" onSubmit={this.handleSubmit}>
         <label>
             Name:
             <input type="text" name="name" enctype='text/plain' value={this.state.data}  />
             <button type="submit">submit</button>
         </label>
        </form>
        <button
         onClick={ () =>
             document.getElementById('form3').dispatchEvent(new Event('submit'))}
        >
         This works
        </button>

我只需要使用action中的button with an eventhandler触发一个简单的提交，就像下面的无效示例一样。

<form id="form4" method="post" action="http://localhost:3000/"  
onSubmit={this.doNothingLetActionDoTheJob}>
             <label>
                 Name:
                 <input type="text" name="name" enctype='text/plain' value={this.state.data}  />
                 <button type="submit">submit</button>
             </label>
         </form>
         <button
             onClick={ () =>
                 document.getElementById('form4').dispatchEvent(new Event('submit'))}
         >
             This does not work
         </button>

这可能吗？如果是，我在做什么错了？

如何触发Reactjs表单从按钮事件处理程序提交到固定URL

0 个答案: