Question

关于我的情况的一些说法：我正在使用ReactJS构建表单，如果它有<input type="submit">元素，它可以正常工作：通过按下input[type="text"]中的输入并按下提交元素（然后在那里提交）来提交表单如果没有任何改变，表格未提交时，ReactJS也会进行工作检查。

但如果我用input[type="submit"]替换<button>ButtonLabel</button>，我会尝试使用两种方法：

获取表单DOMNode元素并调用.submit（）方法，这是不行的，因为它不使用内部的ReactJS逻辑
将params传递给按钮 <button type="submit" form="form-id"> 但它仍然没有使用ReactJS检查（如果没有任何改变，我不想提交表格）

所以如果有人建议我如何使用 BUTTON 元素正确地在ReactJS中提交表单，我将非常感激。

谢谢！

Answer 1

如果将类型设置为提交按钮并且表单具有onsubmit处理程序，则button元素应该完全按预期工作。

<form ref="form" onSubmit={this.handleSubmit}>
    <button type="submit">Do the thing</button>
</form>

Answer 2

在 React Hooks（16.8.0 及更高版本）中，使用 onSubmit 处理程序和 e.preventDefault()：

import React, { useState } from 'react';

const Form = () => {
    
    const [name, setName] = useState('');
    
    const handleSubmit = (e) => {
    
        e.preventDefault();

        console.log(`Form submitted, ${name}`);    

    }

    return(
        <form onSubmit = {handleSubmit}>
            <input onChange = {(e) => setName(e.target.value)} value = {name}></input>
            <button type = 'submit'>Click to submit</button>
        </form>
    );
    
}

export default Form;

使用BUTTON元素在ReactJS中提交表单

2 个答案: