2017-10-17 11 views
9

次のredux-formコンポーネントがあります。isSubmittingセレクタを使用して送信ボタンを無効にします。私render()機能のredux-formを使用しようとしています。送信セレクタ

​​3210

部分の抜粋:

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

    return (
     <StandardModalComponent 
     id="AssignmentModal" 
     title="Create Essay Draft" 
     primaryAction={['Submit', handleSubmit, { disabled: submitting }]} 
     width={800} 
     > 

私が正しくセレクタを使用していますフォームが

マイmapStateToProps機能を提出されている場合しかし、それはtrueを返すことはありませんか?

+0

こんにちは!あなたは 'handleSubmit'関数を表示できますか? –

+0

submittingフラグは、onSubmitがPromiseを返す場合にのみ機能し、redux-formは開始時と終了時を追跡できます。 https://github.com/erikras/redux-form/issues/1238 –

答えて

0

reduxFormホップのisSubmittingセレクタは絶対に使用する必要はありません。 reduxFormホックはsubmitting小道具を通過し、フォームが送信しているかどうかを確認するために使用できます。しかし、還元型はいつ提出するのかを知る必要があります。 onSubmitがPromise以外の値を返した場合、submitting小道具は常にfalseになりますが、redux-formは送信が完了したときに通知する方法がありませんが、onSubmitが(@Sreeragh ARのように)約束が解決されるか拒否されるまでsubmitting propをtrueに設定します。言っ

は、注意すべき何か他のものがあります:あなたはmapStateToPropsisSubmittingセレクタの作成者を使用している、これは本当に悪いです。これにより、各再レンダリングのセレクタが作成されます。これを行う正しい方法は、createMapStateToProps関数を使用することです。

const createMapStateToProps =()=> { 
    const isSubmittingSelector = isSubmitting('CreateNewAssignmentForm'); 

    return (state, props) => { 
    const firstTemplate = _.first(props.templates.toList().toJS()); 
    const course = props.courses.getIn([0, 'id']); 
    let values = { submitting: isSubmittingSelector(state) }; 
    if (firstTemplate === undefined) { 
     return values; 
    } 

    if (firstTemplate) { 
     values = { 
     course, 
     template: firstTemplate, 
     submitting: isSubmittingSelector(state), 
     initialValues: { 
      template: firstTemplate.id, 
      wordCount: firstTemplate.essay_wordcount, 
      timezone: momentTimezone.tz.guess(), 
      label: 'TRANSPARENT', 
     }, 
     }; 
    } 

    return values; 
    } 
} 

export default connect(createMapStateToProps())(
    reduxForm({ 
    form: 'CreateNewAssignmentForm', 
    destroyOnUnmount: false, 
    shouldAsyncValidate, 
    shouldValidate, 
    })(CreateNewAssignmentForm), 
); 
関連する問題