javascript - 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');
 };

现在消息消失了。