如何动态显示TextField下的字符数(内联)

Question

我想创建一个textbox，如下所示，它将在用户输入UI Image (React JS)时动态显示字符数

Answer 1

下面是一个例子

​

const max = 15;

class Application extends React.Component {
  state = {
    text: {
      value: '',
      count: 0,
    },
  };
  
  handleChange = (e) => {
    if(e.target.value.length > max) return;
    this.setState({[e.target.name]: {value: e.target.value, count: e.target.value.length }});
  }
  
  render(){
    const { text } = this.state;
    return(
      <div style={{width: 'fit-content'}}>
        <input name="text" value={text.value} onChange={this.handleChange} onFocus={this.handleChange} />
        <div>
          <span style={{float: 'left'}}>Max {max} characters</span>
          <span style={{float: 'right'}}>{text.count} / {max}</span>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Application />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

​

Answer 2

这是React Hook中的一个：

https://codesandbox.io/s/magical-platform-tb4jr (这里我使用的是textarea值属性)

更新：

这个不是重置计数器。需要处理所有键盘事件。[https://codesandbox.io/s/strange-framework-c158w][1]