Question

我想在提交表单后获取输入的值，但是代码给了我错误-“由于未连接表单而取消了表单提交”。我知道，如果我将按钮类型从“提交”更改为“按钮”，它将起作用，但是我需要提交方法，因为在单击按钮时将编写其他操作，并且不想在onclick函数中编写代码

    updateItem(e) {
        // console.log(this.input.value);
        console.log(2222222222);
        e.preventDefault();

    }

    render() {
        return (
            <div className='wrapper'>
                <form onSubmit={this.updateItem}>
                    <input className='input'
                        type="text"
                        defaultValue={this.props.defValue}
                    // ref={(value) => {
                    //     this.input = value
                    // }}
                    />
                    <button type="submit" 
                            className='submitButton' 
                            onClick{this.props.editItem}>Update
                     </button>
                </form>
            </div>
        );
    }

Answer 1

我认为所有这些答案都是错误的！。这是你应该做的。

由于您的表单将通过 onSubmit 操作提交，因此 type="submit" 就是它在表单中查找的内容。添加多个按钮将触发此警告，因为表单中正在发生多个操作。要解决这个问题，您需要做的就是为第二个或任何其他按钮定义一个类型，例如 type="button" 这将解决您的问题，您可以添加任意数量的按钮。这是一个完整的例子。

1- 按钮 #1

<button type="submit">My submit button</button>

2- 按钮 #2 到无穷大

<button type="button">My 2nd action</button>

我希望它可以帮助任何遇到此问题的人。

Answer 2

您要如何处理这种情况。因为如果您将该按钮类型提交，则onclick不值得。因为表单提交功能将触发。所以你应该做一件事。从该按钮上删除onclick或在一个函数中编写两个代码。

   <form onSubmit={this.updateItem}>
       <input className='input' type="text"defaultValue={this.props.defValue} />
       <button type="submit" className='submitButton'>Update</button>
   </form>

   updateItem = (event) => {
       //do your onsubmit work

       // do your button click work
   }

Answer 3

您的表单具有onSubmit处理程序，其按钮的类型为'submit'并且onClick错误，请删除onClick属性并让表单onSubmit处理程序进行提交

Answer 4

相同的错误，但现在有2个按钮（在“登录”表单中）：

<Button primary id="button_submit" type="submit">Log in</Button>
<Button onClick={onClickForgotPassword}>Forgot your password?</Button>

onSubmit看起来像这样：

const onSubmit = data => {
    props.onLoginStart(data);
};

onClickForgotPassword最初是这样的：

const onClickForgotPassword = () => {
    history.push('/auth/forgotpassword');
};

我也遇到了同样的错误。

通过将event.preventDefault添加到onClickForgotPassword中来解决此问题：

 const onClickForgotPassword = (event) => {
        event.preventDefault();
        history.push('/auth/forgotpassword');
 };

现在消息消失了。

React-由于未连接表单而取消了表单提交

4 个答案: