以动态方式访问字段值

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;