如何获得字符数限制，包括默认名称-Reactjs

Posted 2023-04-18

【中文标题】如何获得字符数限制，包括默认名称-Reactjs

【英文标题】：How to get character count limitation including default name-Reactjs

【发布时间】：2018-11-18 20:21:47

【问题描述】：

我正在尝试获取输入框的字符限制，但输入字段有默认值。

如果字符限制超过文本必须出现在 0 限制（不弹出）

如果我使用下面的代码，它不能满足我的要求（比如默认值已经存在）。

我可以知道如何包含默认值并设置消息，如果它来到 0

class Company extends React.Component 
state = 
      Title: this.props.selectedTable.Title,
      chars_left: 50,
      max_char:50
    

   handleCharacterCount= (event) => 
    const charCount = event.target.value.length;
    const maxChar = this.state.max_char;
    const charLength = maxChar - charCount;
    this.setState( chars_left: charLength );
    //this.setState(sTitle: e.target.value);
   
   render() 
    return (
     <div>
      <textArea
        type="text"
        maxLength="50"
        required
        onChange=this.handleCharacterCount
        value=this.state.Title/>
      />
      <p>this.state.chars_left</p>
    </div>
  )
 

【问题讨论】：

如果是0，你想在哪里设置消息？

下到输入框

onChange 只会在您单击文本区域时触发。如果您想立即更新，请使用onInput。

您的意思是代码是编写的，而不是在更改时使用 onInput

不，只是提供改进。

【参考方案1】：

你可以试试这个

state = 
  Title: this.props.selectedTable.Title,
  chars_left: 50 - this.props.selectedTable.Title.length,
  max_char:50




handleCharacterCount= (event) => 
const charCount = event.target.value.length;
const maxChar = this.state.max_char;
const charLength = maxChar - charCount;
this.setState( chars_left: charLength,Title: event.target.value )



render() 
return (
 <div>
  <textArea
    type="text"
    maxLength="50"
    required
    onChange=this.handleCharacterCount
    value=this.state.Title/>
  />
  
    !this.state.chars_left &&
      <p>text has to appear at 0 limit</p>
  
  <p>this.state.chars_left</p>
</div>)

【讨论】：

确定让我检查

但我还需要检查默认值字符

不明白。请解释。你也想计算默认值字符吗？

我的意思是，我有默认值出现在文本框中，这也算

如果最多有 50 个字符，我的默认名称已经存在-----如果默认名称是 'XYZ'，那么我的计数应该是 47