以動態方式訪問字段值

Question

我想在圖片旁邊用複選框創建一個表單，當用戶點擊一個圖片時，圖片會獲得另一個CSS樣式。爲了做到這一點，我必須訪問Field中的值。

我的問題是，我動態地映射在我的商店中的reducer創建圖片，所以我不能硬編碼字段。我嘗試通過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」，它包含所有字段的值的對象（最初返回未定義）：

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;