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

好的，我终于成功了。

我改变了连接功能，以便变量＆＃34; myValues＆＃34;返回一个包含所有字段值的对象（最初返回undefined）：

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-form中的字段值

1 个答案: