React/Next.js中无法获取input[type=text]输入值的问题

问题根源 #

你代码里维护了两个互不关联的状态：

• state 对象里的 name，用于绑定输入框的value和更新输入值
• 单独的 Name 状态，但这个状态从未被更新过，所以提交时它始终是初始值空字符串

修复方案（二选一即可） #

方案1：统一使用 state 对象管理输入值 #

直接在提交时读取 state.name，不需要单独的 Name 状态：

import React, { FormEventHandler, useState } from 'react';
import axios from 'axios';

export default function Testform() {
    const [state, setState] = useState({ name: '' });
    
    const handleChange = (event: any) => setState({...state, name: event.target.value })
  
    const submitHandler: FormEventHandler<HTMLFormElement> = async (event) => {
        event.preventDefault();
        const name = state.name; // 直接读取state里的name
        alert('name is '+ name); 
    }

    return (
        <form className="forms-sample" onSubmit={submitHandler}>
            <div className='flex-dvs'>
                <div className="form-group">
                    <h3>Blog title</h3>
                    <input type="text"
                        className="form-control"
                        id="exampleInputName1"
                        placeholder="Title"
                        name="name"
                        value={state.name}
                        onChange={handleChange}
                    />
                </div>
            </div>
            <div className='save-btn text-right'>
                <button className='btn btn-primary mr-2'>Save</button>
            </div>
        </form>
    )
}

方案2：使用单独的 Name 状态管理输入值 #

把输入框的value绑定到 Name，并在onChange时更新 Name：

import React, { FormEventHandler, useState } from 'react';
import axios from 'axios';

export default function Testform() {
    const [Name, setName] = useState('');
    
    const handleChange = (event: any) => setName(event.target.value) // 更新Name状态
  
    const submitHandler: FormEventHandler<HTMLFormElement> = async (event) => {
        event.preventDefault();
        alert('name is '+ Name); 
    }

    return (
        <form className="forms-sample" onSubmit={submitHandler}>
            <div className='flex-dvs'>
                <div className="form-group">
                    <h3>Blog title</h3>
                    <input type="text"
                        className="form-control"
                        id="exampleInputName1"
                        placeholder="Title"
                        name="name"
                        value={Name} // 绑定到Name状态
                        onChange={handleChange}
                    />
                </div>
            </div>
            <div className='save-btn text-right'>
                <button className='btn btn-primary mr-2'>Save</button>
            </div>
        </form>
    )
}

额外优化建议 #

• 删除未使用的导入：dynamic、useRef、useEffect 都没用到，清理后代码更简洁
• 状态命名保持风格统一：建议统一用驼峰式的 name，避免大小写混用造成混淆

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