如何使用state值替代表单默认值进行POST提交？

当然可以把表单POST的提交值替换为state里的内容，这里给你两种实用的实现方式：

方法一：阻止默认提交，手动发送请求 #

这是最灵活的方式，能完全控制提交的数据：

1. 给表单添加onSubmit事件处理函数，阻止原生提交行为
2. 在处理函数里用fetch（或axios）手动发送POST请求，把state中的值作为请求体发送

修正后的完整代码示例：

import { useState } from 'react';

export default function MyForm() {
  let [name, setName] = useState('');
  // 修正setName的调用方式，这是你代码里的小错误
  const checkTyping = (e) => {
    setName(e.target.value);
  };

  const handleSubmit = (e) => {
    // 阻止表单默认提交行为
    e.preventDefault();
    
    // 手动发送POST请求，用state里的name值
    fetch('http://localhost:3000/api/hello', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name: name }), // 直接使用state中的值
    })
    .then(res => res.json())
    .then(data => {
      console.log('提交成功:', data);
      // 可添加提交后的逻辑，比如重置表单
    })
    .catch(err => {
      console.error('提交失败:', err);
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Name</label>
      {/* 给select加上value和onChange，同步值到state */}
      <select 
        value={name} 
        onChange={(e) => setName(e.target.value)}
      >
        <option value="value1">选项1</option>
        <option value="value2">选项2</option>
      </select>
      <input 
        type="text" 
        value={name} 
        onChange={checkTyping} 
      />
      <button type="submit">提交</button>
    </form>
  );
}

方法二：用隐藏input绑定state值 #

如果不想手动发送请求，想保留原生表单提交流程，可以添加一个隐藏input，把它的value绑定到state，这样表单提交时会自动发送这个隐藏input的值：

import { useState } from 'react';

export default function MyForm() {
  let [name, setName] = useState('');

  const checkTyping = (e) => {
    setName(e.target.value);
  };

  return (
    <form method="POST" action="http://localhost:3000/api/hello">
      <label>Name</label>
      <select 
        onChange={(e) => setName(e.target.value)}
      >
        <option value="value1">选项1</option>
        <option value="value2">选项2</option>
      </select>
      <input 
        type="text" 
        onChange={checkTyping} 
      />
      {/* 添加隐藏input，name与后端schema要求一致，value绑定state */}
      <input type="hidden" name="name" value={name} />
      <button type="submit">提交</button>
    </form>
  );
}

另外提醒你代码里的两个小问题：

• setName是函数，不能直接赋值setName = e.target.value，必须调用它：setName(e.target.value)
• select需要给option设置value属性，并且最好绑定onChange同步值到state，这样state里的值才是正确的选项值

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