Reactjs 提交前计算redux表单中的字符数

我试图在输入框下面添加一个字符计数器。类似于Twitter在其输入框上的功能：

我在ReduxForm中使用React和Redux，并尝试遵循此指南，但它不使用Redux。 我也尝试过使用action和reducer将其置于状态，但这似乎弄乱了输入框，不允许输入任何内容

最终目标是在输入任何内容之前添加字符计数并禁用submit按钮。 如果有人对如何最好地进行这项工作有任何建议，我将不胜感激

以下是组件代码：

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“反应路由器”导入{Link}；
从'redux form'导入{reduxForm}；
从“操作”导入*作为操作；
类PostQuestionLD扩展了组件{
handleFormSubmit（{content}）{
this.props.postQuestionLD（{content}）；
}
render（）{
const{handleSubmit，字段：{content}}=this.props；
返回(
问题：
问它。。。
);
}
}
函数MapStateTops（状态）{
返回{
错误消息：state.questions.error
}
}
导出默认reduxForm({
表格：'后问题'，
字段：[“内容”]
}，mapstatetops，actions）（问题后处理）由于需要三元来处理
未定义的
情况，我将把长度分配给一个变量，并执行如下操作：

render() {
  const { handleSubmit, fields: { content } } = this.props
  const length = content.value ? content.value.length : 0
  return (
    <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
      // fieldset here
      <div className="count">{length}</div>
      <button 
        type="submit" // type, not action
        className="btn ban-primary"
        disabled={length < 1 || length > 140}>Ask it...</button>
    </form>
  )
}

render（）{
const{handleSubmit，字段：{content}}=this.props
常量长度=content.value？content.value.length:0
返回(
//字段集在这里
{length}
140}>问问它。。。
)
}

这是实现目标的最短路径。理想情况下，您应该使用
redux表单
的内置同步验证在超过字符限制时显示警告，并使用
disabled={this.props.invalid}
禁用按钮。查看如何在中控制
用户名的长度。
确保
handleFormSubmit
返回承诺