React父子组件通信问题：子组件输入框仅能输入单个字符

问题根源 #

你遇到的输入框只能输入单个字符、状态更新无效的问题，核心是状态更新的写法错误：

• 你使用...answers展开对象的方式不对，而且直接把展开后的内容和[id]: event.target.value作为多个参数传给setAnswers，但setAnswers只接受一个完整的状态对象作为参数。
• 没有正确合并原有状态，导致每次更新时丢失了其他字段的内容，输入框的value无法正确绑定最新的完整状态，所以看起来只能输入单个字符。

正确解决方案 #

1. 父组件中正确编写状态更新逻辑

使用函数式更新（确保获取到最新的状态快照）+ 对象展开语法（合并原有状态和新的字段值），避免状态覆盖。

2. 子组件正确绑定value和onChange

确保子组件的输入框value绑定到父组件传递的对应字段值，onChange事件正确传递输入值到父组件的更新函数。

完整代码示例 #

父组件

import { useState } from 'react';
import QuestionItem from './QuestionItem';

function ParentComponent() {
  // 初始化answers状态，包含指定字段
  const [answers, setAnswers] = useState({ q1: '', q2: '', q4: '', q5: '' });

  // 问题数组，包含需要渲染的问题id
  const questions = [
    { id: 'q1', text: '问题1' },
    { id: 'q2', text: '问题2' },
    { id: 'q4', text: '问题4' },
    { id: 'q5', text: '问题5' },
  ];

  // 处理答案更新的函数，接收问题id和输入值
  const handleAnswerChange = (id, value) => {
    // 函数式更新，prevAnswers是当前最新的状态
    setAnswers(prevAnswers => ({
      ...prevAnswers, // 展开原有状态，保留其他字段
      [id]: value // 更新当前id对应的字段值
    }));
  };

  return (
    <div>
      {questions.map(question => (
        <QuestionItem
          key={question.id}
          id={question.id}
          questionText={question.text}
          value={answers[question.id]}
          onChange={(e) => handleAnswerChange(question.id, e.target.value)}
        />
      ))}
      {/* 可选：预览当前状态 */}
      <pre>{JSON.stringify(answers, null, 2)}</pre>
    </div>
  );
}

export default ParentComponent;

子组件（QuestionItem.jsx）

function QuestionItem({ id, questionText, value, onChange }) {
  return (
    <div style={{ marginBottom: '10px' }}>
      <label htmlFor={id}>{questionText}:</label>
      <input
        type="text"
        id={id}
        value={value}
        onChange={onChange}
        style={{ marginLeft: '8px' }}
      />
    </div>
  );
}

export default QuestionItem;

关键说明 #

• 使用setAnswers(prevAnswers => {...})的函数式更新，是因为React的状态更新可能是异步的，函数式更新能保证我们基于最新的状态进行修改，避免状态不一致。
• ...prevAnswers展开原有状态对象，确保其他字段（比如q1、q2等）不会被覆盖，只更新当前id对应的字段。
• 子组件的输入框严格绑定value={value}，确保输入框内容和父组件状态保持同步，解决只能输入单个字符的问题。

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