动态访问 redux 形式的字段值

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"，一个包含所有字段值的对象（最初 returns 未定义）：

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;

动态访问 redux 形式的字段值

Accessing field values in redux-form dynamically

redux

redux-form

react-redux