フィールドの値に動的にアクセスする

Question

画像の隣にあるチェックボックスを使用してフォームを作成したい場合、ユーザーが画像をクリックすると画像に別のCSSスタイルが適用されます。これを行うには、フィールドから値にアクセスする必要があります。

私の問題は、写真を作成するために私の店の減速機に動的にマップするので、フィールドをハードコードできないということです。私はformValueSelectorでそれをやろうとしましたが、console.logにすると値は得られません。私は本当にこれを行う方法の手がかりがありません。

すでにredux-form.com/6.4.3/examples/selectingFormValuesでドキュメントを確認しましたが、問題の解決方法が見つかりませんでした。

import React from 'react'; 
import { Field, reduxForm, formValueSelector } from 'redux-form'; 
import { connect } from 'react-redux'; 

let UserCreationPageThree = (props) => { 
    const { handleSubmit, previousPage, products, submitting } = props; 

    return (
    <form onSubmit={handleSubmit}> 
     <div className="row"> 
     <div className="col-xs-12"><label className="pull-left">Apps</label></div> 
     { 
      products.products.products.map(product => { 
      return(
       <div className="col-xs-2 app-container" key={ product.id }> 
       <img className="app-circle" src={ product.image } alt={ product.title} 
        data-toggle="tooltip" data-placement="top" title={ product.title }/> 
       <Field name={ product.name } className="app-checkbox" 
         component="input" type="checkbox"/> 
       </div> 
      ); 
      }) 
     } 
     </div> 

     <div className="btn-toolbar modal-btns"> 
     <button className="btn btn-primary" onClick={previousPage}> 
      <span className="glyphicon glyphicon-chevron-left"> Back</span> 
     </button> 

     <button type="submit" disabled={submitting} 
        className="btn btn-success"> 
      Submit <span className="glyphicon glyphicon-send"/> 
     </button> 
     </div> 
    </form> 
); 
} 

UserCreationPageThree = reduxForm({ 
    form: 'UserCreationForm', //same Form name for all pages 
    destroyOnUnmount: false 
})(UserCreationPageThree); 

const selector = formValueSelector('UserCreationForm'); 

UserCreationPageThree = connect(
    state => selector.apply(this, [state, ...state.products.products.map(product => product.name)]) 
)(UserCreationPageThree) 

export default UserCreationPageThree; 

Answer 1

さて、私はついにそれを作った。

変数「myValues」は、全てのフィールド（最初にundefinedを返し）の値を含むオブジェクトが返されるようにIは、接続機能を変更：

UserCreationPageThree = connect(
    state => { 
    const myValues = selector(state, ...state.products.products.map(product => product.name)); 
    return { myValues } 
    } 

を私は決定するために、この三元機能を使用スタイルが適用されるべきかどうか：誰もが興味を持っている場合

className={myValues[product.name] ? "klappt" : "app-circle"} 

ここでは、完全なコードです：

import React from 'react'; 
import { Field, reduxForm, formValueSelector } from 'redux-form'; 
import { connect } from 'react-redux'; 

let UserCreationPageThree = (props) => { 
    const { handleSubmit, previousPage, products, submitting, myValues } = props; 

    return (
    <form onSubmit={handleSubmit}> 
     <div className="row"> 
     <div className="col-xs-12"><label className="pull-left">Apps</label></div> 
     { 
      products.products.products.map(product => { 
      return(
       <div className="col-xs-2 app-container" key={ product.id }> 
       <img className={myValues[product.name] ? "klappt" : "app-circle"} src={ product.image } alt={ product.title } 
        data-toggle="tooltip" data-placement="top" title={ product.title }/> 
       <Field name={ product.name } className="app-checkbox" 
         component="input" type="checkbox"/> 
       </div> 
      ); 
      }) 
     } 
     </div> 

     <div className="btn-toolbar modal-btns"> 
     <button className="btn btn-primary" onClick={previousPage}> 
      <span className="glyphicon glyphicon-chevron-left"> Back</span> 
     </button> 

     <button type="submit" disabled={submitting} 
        className="btn btn-success"> 
      Submit <span className="glyphicon glyphicon-send"/> 
     </button> 
     </div> 
    </form> 
); 
} 

UserCreationPageThree = reduxForm({ 
    form: 'UserCreationForm', //same Form name for all pages 
    destroyOnUnmount: false 
})(UserCreationPageThree); 

const selector = formValueSelector('UserCreationForm'); 

UserCreationPageThree = connect(
    state => { 
    const myValues = selector(state, ...state.products.products.map(product => product.name)); 
    return { myValues } 
    } 
)(UserCreationPageThree) 

export default UserCreationPageThree;