我是 reactjs 的新手，我试图获取 textarea 字符数，当用户输入 textarea 但无法获取计数时需要显示它也抛出状态对象是只读错误。我的代码是
import React from "react";
export default function FullWidthTabs() {
const [textAreaCount = 0, textAreaTotal = 250] = React.useState(0);
const recalculate = e => {
console.log("event value:", e);
textAreaCount = e.target.value.length;
};
return (
<textarea
type="text"
rows={5}
className="full_height_Width"
onChange={recalculate}
/>
);
}
这里预期的输出需要更新字符数，如
import React from "react";
import "./styles.css";
export default function App() {
const [count, setCount] = React.useState(0);
return (
<div>
<textarea
type="text"
rows={5}
className="full_height_Width"
onChange={e => setCount(e.target.value.length)}
/>
<p>{count}</p>
</div>
);
}
首先，您应该考虑不能通过为其分配值来直接更改状态值。其次，您应该像这样使用 useState 钩子：
const [count, setCount] = useState(0);
这里count是你的状态，setCount是一个改变（设置）状态的函数。因此，您的重新计算功能必须更改为：
const recalculate = (e) => {
console.log('event value:', e);
setCount(e.target.value.length);
}
这是工作代码。更新useState.
import React from "react";
export default function FullWidthTabs() {
const [textAreaCount, setTextAreaCount] = React.useState(0);
const recalculate = e => {
console.log("event value:", e);
setTextAreaCount(e.target.value.length);
};
return (
<div>
<p> {`Textarea Char Count: ${textAreaCount}`} </p>
<textarea
type="text"
rows={5}
className="full_height_Width"
onChange={recalculate}
/>
</div>
);
}
这是你想要的代码
https://codesandbox.io/s/rkv88-lsyvo
usestate 钩子有两个参数，第一个是你想要的 var 的名称，第二个是一个函数，你将值传递给它以更改变量