제출하기 전에 redux 양식의 문자 계산

Question

입력 상자 아래에 문자 카운터를 추가하려고합니다. 트위터가 입력 상자에 얼마나 유사 뭔가 : 나는 반응 ReduxForm로 돌아 오는 사용하고 있는데이 가이드 Overview: We’re Going to Build a “Tweet Box”을 따르도록 노력했다

그러나 그것은 돌아 오는을 사용하지 않습니다. 나는 액션과 감속기를 사용하여 상태에 넣으려고했지만 입력 상자가 엉망이고 입력 할 내용을 허용하지 않습니다.

최종 목표는 글자 수를 추가하고 아무 것도 입력하기 전에 제출 버튼을 사용 중지하는 것입니다. 누구나이 문제를 가장 효과적으로 해결할 수있는 방법에 대한 제안이 있으면 크게 감사하겠습니다.

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}으로 버튼을 사용 중지하십시오. username 길이가 Synchronous Validation Example에서 어떻게 제어되는지 확인하십시오.

Answer 2

handleFormSubmit이 Promise를 반환하는지 확인하십시오.