React组件：如何让textCount同时响应输入变更与父组件传入的name值？

要让textCount既能随用户输入实时更新，又能同步父组件传入的name值，需要做两处核心调整：

• 初始化textCount时使用父组件传入的value长度
• 监听value属性的变化，当父组件的name更新时同步更新textCount

修改后的Textarea组件代码：

import React, { useState, useEffect } from "react";

function Textarea(props) {
  // 用props.value的长度初始化，兼容value为空的情况
  const [textCount, setTextCount] = useState(props.value?.length || 0);

  const recalculate = (e) => {
    setTextCount(e.target.value.length);
  };

  // 监听props.value变化，同步更新textCount
  useEffect(() => {
    setTextCount(props.value?.length || 0);
  }, [props.value]);

  return (
    <>
      <textarea
        value={props.value} // 绑定value，确保输入框和父组件name值同步
        onChange={(e) => {
          recalculate(e);
          props.onChange(e);
        }}
      />
      <p>{textCount}/5</p>
    </>
  );
}
export default Textarea;

App组件无需修改，保持原有逻辑即可。

关键改动说明 #

1. 初始化state：把原来固定的useState(0)改成useState(props.value?.length || 0)，确保组件挂载时就显示正确的计数。
2. 添加useEffect监听：当父组件传入的value（也就是name）变化时，自动更新textCount，比如父组件修改了name的值，输入框和计数都会同步更新。
3. 绑定输入框的value：补上value={props.value}后，输入框变成受控组件，和父组件状态保持一致，父组件的name值会直接显示在输入框内。

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