在提交之前以redux形式计算字符

Question

我想在输入框下面添加一个字符计数器。类似于Twitter在输入框中的含义：

http://localhost:8084/index.jsp

我正在使用React和Redux与ReduxForm并尝试遵循本指南，但它不使用Redux。 我也尝试使用动作和减速器将其置于状态，但这似乎与输入框混乱，并且不允许输入任何内容。

最终目标是在输入任何内容之前添加字符计数并禁用提交按钮。 如果有人对如何做到这一点有任何建议，我将不胜感激。

以下是组件代码：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import {reduxForm} from 'redux-form';

import * as actions from 'Actions';

class PostQuestionLD extends Component {

  handleFormSubmit({content}) {
    this.props.postQuestionLD({content});
  }

  render() {
    const { handleSubmit, fields: { content }} = this.props;
    return (
      <div>
        <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
          <fieldset className = "form-group" >
            <lable >Question: < /lable> <input {...content} className = "form-control" / >
          </fieldset>
          <button action = "submit" className = "btn btn-primary" > Ask it... </button>
        </form>
        </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    errorMessage: state.questions.error
  }
}

export default reduxForm({
    form: 'postquestion',
    fields: ['content']
}, mapStateToProps, actions)(PostQuestionLD);

Answer 1

好吧，由于需要三元句来处理undefined的情况，我会将长度分配给变量，并执行以下操作：

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>
  )
}

这是达到目标的最短途径。理想情况下，您使用redux-form的内置同步验证在传递字符限制时显示警告，并使用disabled={this.props.invalid}禁用该按钮。了解如何在Synchronous Validation Example中控制username的长度。

Answer 2

确保handleFormSubmit返回承诺。