Javascript 提交按钮仅在div位于表单内部时工作-React

我在react组件中有一个输入， 当输入在表单内部时，Enter按钮将触发单击，但如果输入未包装在表单内部，则Enter不起作用

通过表单包装输入是激活“回车”按钮的唯一方法吗

    <div>
        <input name=“name” type="text"
           value={somevalue} onChange={this.handleChange}/>
        <button  id=“searchbutton”
            onClick={this.handleSubmit}>
            {search label}
        </button>
    </div>

{搜索标签}

通过表单包装输入是激活“回车”按钮的唯一方法吗

    <div>
        <input name=“name” type="text"
           value={somevalue} onChange={this.handleChange}/>
        <button  id=“searchbutton”
            onClick={this.handleSubmit}>
            {search label}
        </button>
    </div>

您的另一个选项是使用

输入

上的

按键

处理程序并检查回车键

它在

表单

中工作的原因是，如果表单只有一个文本

输入

，并且用户按Enter键，浏览器会自动单击表单上的提交按钮。如果没有表单，您将无法获得自动行为。

//默认情况下，表单中的按钮类型为“提交”。改为：
//By default in form type of button is "submit". Change that to : 
    <button  type="button" id="searchbutton"
           onClick={this.handleSubmit}>
           {search label}
    </button>

{搜索标签}

这是HTML的默认行为。您还可以防止这种行为，并手动将keyup事件绑定到一个方法。您是否有不想使用表单的原因？请检查此项-只是为了清楚：您希望

输入中的Enter键触发按钮，对吗？没错@T.J.crowdert这正是我在表单之外创建的
输入所要做的。我必须为它创建一个单独的
keypress
处理程序来处理按enter键的用户。对我来说，如果出于某种原因您不想使用表单，这是最好的解决方案。@OsamaKhalid-对，这就是为什么OP在
表单中看到他看到的行为。我不知道为什么会有这样的评论…？我的印象是OP希望回车键（在
输入中）点击按钮。将其更改为普通按钮将停止该操作。他在单击时调用该函数，因此无论从何处单击，该函数都将工作！操作员现已确认，他希望在
输入中按Enter键单击按钮。