我试图在 react js 中对 textArea 实施特许限制，这是我的代码。
state = {
chars_left: 140;
}
handleWordCount = event => {
const charCount = event.target.value.length;
const maxChar = this.state.chars_left;
const charLength = maxChar - charCount;
this.setState({ chars_left: charLength });
}
<textArea
rows={6}
type="text"
maxLength="140"
required
onChange={this.handleWordCount}
/>
{ ${this.state.chars_left}}
我有一个函数，它应该显示用户正在输入多少个字符，它从 140 开始，但是每次我输入一个字符时，它都会跳过大量的数字，比如 130
可能是什么问题？
问题是您一直在根据旧值更新 chars_left 属性
跟随将按预期工作
state = {
chars_left: 140;
}
handleWordCount = event => {
const charCount = event.target.value.length;
const charLeft = 140 - charCount;
this.setState({ chars_left: charLeft});
}
我的示例代码可以通过动态获取 maxlengt attr 来改进
此代码可帮助您在 Textarea 元素中输入文本时计算字符的长度。此功能的优点之一是它可以检测用户删除字符或添加字符。
您可以在这里使用此代码片段：
使用 useState() 钩子创建内容状态变量并将其值设置为 value prop 的值，修剪以限制字符。
创建一个方法 setFormattedContent，它使用 useCallback() 钩子修剪内容以限制字符并记住它。
绑定 onChange 事件以使用触发事件的值调用 setFormattedContent。
const LimitedTextarea = ({ rows, cols, value, limit }) => {
const [content, setContent] = React.useState(value.slice(0, limit));
const setFormattedContent = React.useCallback(
text => {
setContent(text.slice(0, limit));
},
[limit, setContent]
);
return (
<>
<textarea
rows={rows}
cols={cols}
onChange={event => setFormattedContent(event.target.value)}
value={content}
/>
<p>
{content.length}/{limit}
</p>
</>
);
}; 示例 ReactDOM.render( , document.getElementById('root') );
发生这种情况是因为每次您尝试从剩余字符中减去 textare 中的字符数时。定义一个新的变量或状态，max_char并char_left通过从 中减去长度来获得max_char。this.state.char_left你也不需要写反引号，因为你已经在使用{}
class App extends React.Component {
state = {
chars_left: 140,
max_char:140
}
handleWordCount = event => {
const charCount = event.target.value.length;
const maxChar = this.state.max_char;
const charLength = maxChar - charCount;
this.setState({ chars_left: charLength });
}
render() {
return (
<div>
<textArea
rows={6}
type="text"
maxLength="140"
required
onChange={this.handleWordCount}
/>
<p>{this.state.chars_left}</p>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>问题是您基本上使用一个变量来跟踪最大字符数以及剩余字符数。
我还会maxLength在您的 textArea 中更改以使用状态变量，而不是对其进行硬编码。
尝试为此使用两个变量，如下例所示：
class MyApp extends React.Component {
constructor() {
super();
this.state = {chars_left: 140, max_chars: 140};
}
handleWordCount = event => {
const charCount = event.target.value.length;
const maxChar = this.state.max_chars;
const charLength = maxChar - charCount;
this.setState({chars_left: charLength});
}
render() {
return (
<div>
<textArea
rows={6}
type="text"
maxLength={this.state.max_chars}
required
onChange={this.handleWordCount}
/>
<div>{this.state.chars_left}</div>
</div>
);
}
};
ReactDOM.render(<MyApp />, document.getElementById('myapp'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="myapp"></div>不过，我会做另一个小改动：
this.state = {chars_left: null, max_chars: 140};
...
<div>{this.state.chars_left || this.state.max_chars}</div>
这种方式chars_left不需要知道max_chars设置的内容，并且如果将来限制发生变化，您需要管理的变量少 1 个。