React - 表单提交取消，因为表单未连接

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

同样的错误，但现在有 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');
 };

现在消息消失了。

Answer 2

你的表单有一个 onSubmit 处理程序，有一个 type='submit' 和 onClick 的按钮是错误的，删除 onClick 道具并让表单 onSubmit 处理程序提交

Answer 3

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

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

1- 按钮 #1

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

2- 按钮 #2 到无穷大

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

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

Answer 4

你想用这个条件做什么。因为如果你让那个按钮类型提交然后 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
   }