React实现输入文本实时预览功能的问题及代码排查求助

你的输入框无法输入，核心问题是handleChange函数里获取表单字段名的方式错误：

// 错误写法
const message = event.target.message;

input元素并没有message这个属性，你需要通过event.target.name来获取输入框的name属性值（也就是你设置的message），这样才能正确对应到formData里的字段。

同时我帮你加上了实时预览功能，直接在表单下方添加预览区域即可实现输入内容同步显示。

以下是完整的修正代码：

import React, { useState } from "react";

const kInitialFormData = {
    message: '',
};

const NewForm = ({ handleSubmit }) => {
    const [formData, setFormData] = useState(kInitialFormData);

    const handleChange = (event) => {
        const value = event.target.value;
        const name = event.target.name; // 修正字段名获取逻辑

        setFormData(prev => ({
            ...prev, [name]: value
        }));
    };

    const handleFormSubmit = (event) => {
        event.preventDefault();
        handleSubmit({ ...formData });
        setFormData(kInitialFormData);
    };

    return (
        <form onSubmit={handleFormSubmit}>
            <label htmlFor="message">Message: </label>
            <input 
                type="text"
                id="message"
                name="message"
                value={formData.message}
                onChange={handleChange}
            />
            <input type="submit" value="Post Message" />
            {/* 实时预览区域 */}
            <div style={{ marginTop: '16px', padding: '8px', border: '1px solid #eee' }}>
                <h4>预览:</h4>
                <p>{formData.message || '请输入内容'}</p>
            </div>
        </form>
    );
};

export default NewForm;

关键改动说明： #

• 修正handleChange中的字段名获取逻辑，改用event.target.name匹配表单字段，确保状态更新正确
• 添加带样式的预览区域，通过formData.message实时同步输入内容，无输入时显示提示文本

修改后输入框可正常输入，预览区域会实时同步显示你输入的内容。

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