Reduxフォームを使用して、フィールドが入力されていない場合、送信ボタンを無効にするにはどうしたらいいですか？

Question

私はRedux Form v.7.1.2を使用していますが、最初に送信ボタンを無効にしようとしています。ユーザーがchangeまたはkeyupイベントをアクティブにすると、フォーム内のフォームフィールドのANYに値があるかどうかを確認するフォームが必要です。その場合は、送信ボタンを有効にします。私は必要なフィールドがありません。私はちょうど私がjQueryのでこれを達成している

必ずそれらの少なくとも1つを充填値を持っていることを確認する必要があります。

// Change disabled attribute on search box submit button depending on if there is a value in any field 
    $searchFormFields.on('change keyup', function() { 
    $('#search-box-search-btn').prop('disabled', true); 
    $searchFormFields.each(function() { 
     if ($(this).val().length > 0) { 
     $('#search-box-search-btn').prop('disabled', false); 
     return false; // break the loop 
     } 
    }); 
    }); 

私も今反応しReduxの使用するようにサイトを変換していますし、私はこれを働かせようとすることをどこから始めるべきか全く分かりません。何か案は？

Answer 1

あなただけの何のフィールドが記入されていないことを確認したい場合は、次の行を使用することができます。

<button type="submit" disabled={this.props.pristine}>Submit</button>

pristineをReduxの-フォームは、フォーム場合は参照できることを追加することに小道具でありますどんなフィールドにも記入されていません。詳細はin their API Docsをご覧ください。現在のフォーム値をフォーム上の初期値と比較しています。

フォームが変更されていない場合は、実際にボタンを無効にする必要があることが判明しました最後に提出してからを送信しています。

この状態を確認するには、フォームを送信するときに現在の値を初期値として割り当てることができます。次にフォームがpristineの場合、redux-formは最新のサブミットに設定された最後の初期値と現在の値を比較します。あなたが必要とする

import { Field, reduxForm } from 'redux-form'; 

class SearchFilters extends Component { 
    constructor(props) { 
    super(props); 
    this.onSubmit = this.onSubmit.bind(this); 
    } 

    onSubmit(values) { 
    // Check if the form values have changed since the last submit 
    // The dirty boolean (signifies if the form has changed from its initial values) is established by redux-form by comparing the currently entered values to the initial form values 
    // After we identify the form as having been changed, we will send the new form values to replace the original initial form values so redux-form is always comparing the current form values against the last submitted form values 
    if (this.props.dirty) { 
     // Set the initial values for the form on the redux store (This is used by redux form to compare the current values to the initial values so we can determine if there are new values since the last submit) 
     this.props.initialize(values); 
    } 
    } 

    renderField(field) { 
    return (
     <div className="search-parameter"> 
     <input type="text" {...field.input} /> 
     </div> 
    ); 
    } 

    render() { 
    const { handleSubmit, submitting, invalid } = this.props; 

    return (
     <form onSubmit={handleSubmit(this.onSubmit)} > 
     <Field 
      component={this.renderField} 
      key="keyword" 
      name="keyword" 
     /> 
     <Field 
      component={this.renderField} 
      key="type" 
      name="type" 
     /> 
     <button 
      type="submit" 
      disabled={submitting || pristine || invalid} 
     > 
      Search 
     </button> 
     </form> 
    ); 
    } 
} 

export default reduxForm({ 
    validate, 
    form: 'SearchFiltersForm', 
})(connect(mapStateToProps, null)(SearchFilters));