将useState设置为compent内部的值

您可以在Textarea组件中添加一个状态,并将其设置为初始值,还可以初始化相应的计数:

  const [textCount, settextCount] = useState(props.value.length);
  const [textValue, setTextValue] = useState(props.value);

然后使用文本区域内的文本值:

  <textarea
    type="text"
    value={textValue}
    onChange={(e) => {
      recalculate(e);
      props.onChange(e);
      setTextValue(e.target.value)
    }}
  />

如果这就是你想要的,这里有一个作品 sandbox

编辑:从评论中添加改进的沙盒

improved version 来自@Leland

表单元素上的value属性将覆盖DOM中的值。如果要指定初始值,但不控制后续更新,则可以指定defaultValue属性而不是值。

<textarea defaultValue={name} onChange={change} />

你不需要有状态 textCount 自 Textarea 组件在任何时候接收到新值时都将被重新渲染,因此我们可以计算 length 的值。

此外 <p> 标签必须在外部 <textarea> 元素,以及 recalculate() 在这种情况下,函数似乎没有必要,因为我们可以获得 长 只需阅读 长 属性的值。

export default function App() {
  const [textValue, setTextValue] = useState("initialValue");
  return (
    <div className="App">
      <Textarea value={textValue} onChange={setTextValue}/>
    </div>
  );
}

export function Textarea(props) {
  return (
    <>
      <textarea value={props.value} onChange={(e) => {
        props.onChange(e.target.value)
      }}
      ></textarea>
      <p>textCount: {props.value.length}</p>
    </>
  )
}