React类组件实现提交输入文本按内容长度累加计数器的问题

需要修改3处核心逻辑即可符合需求：

• 补充state配置：新增value字段存储输入框的实时输入内容
• 新增输入事件处理方法handleChange：同步用户输入内容到state，实现输入框受控
• 调整提交点击逻辑：将原来每次累加1的逻辑，改为累加当前输入内容的长度，可选新增提交后清空输入框的优化

调整后的完整代码如下：

import React, { Component } from 'react'

export class TextInput extends Component {
  constructor(){
    super()
    this.state = {
      count: 0,
      value: ''
    }
    this.handleClick = this.handleClick.bind(this)
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e){
    this.setState({
      value: e.target.value
    })
  }

  handleClick(){
    this.setState(prevState => {
      return {
        count: prevState.count + prevState.value.length,
        value: ''
      }
    })
  }

  render(){
    return(
      <div>
        <input 
          type="text" 
          value={this.state.value} 
          onChange={this.handleChange} 
          placeholder="请输入内容"
        />
        <button onClick={this.handleClick}>提交</button>
        <span>{this.state.count}</span>
      </div>
    )
  }
}
export default TextInput

可以根据实际需求调整计数器、输入框、按钮的排版顺序，当前代码已经完全符合输入内容长度累加的功能要求。

内容的提问来源于stack exchange，提问作者DevA