Question

我试图在react js中为textArea实现chartercter限制这是我的代码。

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

问题是您是否继续根据旧值

更新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

来改进我的示例代码

Answer 2

这种情况正在发生，因为每次你试图从左边的字符中减去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>

Answer 3

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

我还会在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 4

此代码可帮助您在 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') );

反应js字符限制

4 个答案: