React js字符限制

Question

我正在尝试在 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

可能是什么问题？

Answer 1

发生这种情况是因为每次您试图从剩余的字符中减去 textare 中的字符数。定义一个名为max_char 的新变量或状态，并通过从max_char 中减去长度得到char_left。你也不需要在反引号中写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>

Answer 2

此代码可帮助您在 Textarea 元素中输入文本时计算字符的长度。 此功能的优点之一是它可以检测用户删除或添加字符。

这里可以使用这段代码sn-p：

• 使用 useState() 钩子创建内容状态变量并将其值设置为 value prop 的值，修剪以限制字符。

• 创建一个方法 setFormattedContent，使用 useCallback() 钩子将内容剪裁以限制字符并对其进行记忆。

• 将调用setFormattedContent的onChange事件与触发事件的值绑定。

  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') );

Answer 3

问题是您一直在根据旧值更新 chars_left 属性

follow 将按预期工作

state = {
   chars_left: 140;
}

handleWordCount = event => {
    const charCount = event.target.value.length;
    const charLeft = 140 - charCount;
    this.setState({ chars_left: charLeft});
}

我的示例代码可以通过动态获取 maxlent attr 来改进

Answer 4

问题在于您基本上使用一个变量来跟踪最大字符数，以及剩余的字符数。

我还将更改您 textArea 中的 maxLength 以使用状态变量，而不是对其进行硬编码。

尝试为此使用两个变量，如下例所示：

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 个变量。

Answer 5

如果要显示一定数量的字符，请使用以下代码。

 {`${textToShow.substring(0, 70)}... `} 

在这里，您可以使用自己想要切片的文本来代替“textToShow”。