React+Laravel项目未提交表单Fetch API自动触发及输入值获取问题

1. 页面加载就触发请求的问题 #

你写的onSubmit={handleSubmit(/api/provinsi, nama)}属于直接调用函数，组件渲染时就会执行handleSubmit逻辑，而不是等提交事件触发时再执行。正确的做法是给onSubmit传递一个函数引用，提交时才会触发内部逻辑，同时记得阻止表单默认提交行为避免页面刷新。

2. 输入框值获取的问题 #

你需要用onChange属性实现输入框和state的双向绑定，现在你的输入框没有和nama状态关联，输入内容不会同步到状态里，提交时拿不到最新的输入值。

修改后的完整代码 #

import React, { useState} from 'react';

const CreateDaerah = () => {
    const [nama, setNama] = useState('');

    const handleSubmit = (e) => {
        // 阻止表单默认提交行为
        e.preventDefault();
        fetch(`/api/provinsi`, {
            method: "POST",
            body: JSON.stringify({nama: nama}),
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => console.log(response))
        .catch(err => console.error(err));
    }
    
    // 输入值同步到state
    const handleInputChange = (e) => {
        setNama(e.target.value);
    }

    return(
        <div className="card-create">
            {/* 这里传入函数引用，不直接调用 */}
            <form onSubmit={handleSubmit}>
                <h1>Form Provinsi</h1>
                <label htmlFor="nama">Nama</label>
                <input 
                    type="text" 
                    className="nama-provinsi" 
                    name="nama" 
                    placeholder="masukkan nama"
                    value={nama}
                    onChange={handleInputChange}
                />
                <button type="submit">Submit</button>
            </form>
        </div>
    );
}

export default CreateDaerah;

额外说明 #

如果需要把handleSubmit封装成可复用的通用提交方法，也可以用箭头函数包裹传参的写法：

const handleSubmit = (url, data) => (e) => {
  e.preventDefault();
  // 后续fetch逻辑不变
}

// 表单上的写法就可以保持传参
<form onSubmit={handleSubmit(`/api/provinsi`, {nama})}>

内容的提问来源于stack exchange，提问作者Yustina Yasin