标签: redux-form

您如何将 redux 表单中复选框的默认布尔值更改为您在输入本身上指定的值？

例如，我有一个这样的输入：

<input type="checkbox" value="Pages missing or out of order" {...issue1} />

当 Redux 表单选择它时，它只会给我一个真/假，即使我想要值“页面丢失或乱序”

我可以做这样的事情来到达我需要去的地方，以便在表单提交时，它会提交值“页面丢失或乱序，而不是真/假？

<input type="checkbox" onChange={value => console.log(value.target.value)} value="Pages missing or out of order" />

当我删除 {...issue1} 时，将调用我的自定义 onChange 事件处理程序，但是当我保留 {...issue1} 时，它会被完全忽略。

想法？

在Redux-form v5中,我能够从装饰表单中的任何位置访问"内联"错误(异步验证),如下所示:

const fields = [
  'email'
]

// inside the decorated form
const { email } = this.props.fields

console.log(email.error) // 'the validation error of the 'email' field

如何使用Redux-form 6.0.0+实现相同的功能？

我尝试运行示例代码.

<form onSubmit={values => console.log("========>", values)}>
    <div>
      <label htmlFor="firstName">First Nameeee</label>
      <Field name="firstName" component="Input" type="text"/>
    </div>
    <div>
      <label htmlFor="lastName">Last Name</label>
      <Field name="lastName" component="Input" type="text"/>
    </div>
    <div>
      <label htmlFor="email">Email</label>
      <Field name="email" component="Input" type="email"/>
    </div>
    <button type="submit">Submit</button>
  </form>

但是当我处理onSubmit事件时,param值返回一个Proxy而不是一个带有输入值的对象.

//Console.log output
Proxy {dispatchConfig: Object, _targetInst: ReactDOMComponent, _dispatchInstances: ReactDOMComponent, nativeEvent: Event, type: "submit"…}

这个排序的作品,除了附加块显示不出来,当我做出的service_type无线电选择它,只弹出/重新呈现,如果我完成额外的操作,比如添加或删除服地块或更改其他领域.

    import './Register.scss';
    import React, { Component, PropTypes } from 'react';
    import { connect } from 'react-redux';
    import { Field, reduxForm, FieldArray, formValueSelector } from 'redux-form';
    import MenuItem from 'material-ui/MenuItem';
    import { RadioButton } from 'material-ui/RadioButton'
    import {
      TextField,
      SelectField,
      TimePicker,
      RadioButtonGroup
    } from 'redux-form-material-ui';
    import validate from './validate';

    class OnboardPageThree extends Component {
      static propTypes = {
        handleSubmit: PropTypes.func.isRequired,
        previousPage: PropTypes.func.isRequired
      }

      constructor(props, context) {
            super(props, context);
        }

      renderGroups = ({ fields, meta: { touched, error } …

我正在使用ReactJS和ReduxJS来构建我的应用程序.

我使用Redux-Form创建了我的表单,并且有很多文本输入,对于其中一个,我使用onkeyDown事件来增加和减少我的文本中的数字

因此,当我单击向上箭头或输入第一个数字时,文本将自动完成,输入上一个日期(历史记录),当我单击另一个向上箭头时会打扰

[提示]我尝试过AutoComplete=off 但没有工作

目前我正在使用redux-form,现在我必须将我的reduxForm组件连接到我的redux存储.所以,看看文档我必须做的事情如下:

// Decorate with reduxForm(). It will read the initialValues prop provided by connect()
InitializeFromStateForm = reduxForm({
  form: 'initializeFromState'  // a unique identifier for this form
})(InitializeFromStateForm)

// You have to connect() to any reducers that you wish to connect to yourself
InitializeFromStateForm = connect(
  state => ({
    initialValues: state.account.data // pull initial values from account reducer
  }),
  { load: loadAccount }               // bind account loading action creator
)(InitializeFromStateForm)

export default InitializeFromStateForm

我在我的组件中做了类似的事情,但是,eslint …

我正在尝试从父组件检测表单状态是否脏，因此，如果表单值已更改，我只能显示一个提交按钮。

初始渲染按预期显示为false，但是更改值不会触发使用新vlaue的重新渲染。

import React from 'react'
import { isDirty } from 'redux-form'
import { connect } from 'react-redux'

<Parent>
  { props.isDirty ? <SubmitButton /> : null }
  <Form {...etc} />
</Parent>

const mapStateToProps = state => ({
  ...
  isDirty: isDirty('myForm')(state),
})

export default connect(mapStateToProps, null)(Parent)

控制台日志记录props.isDirty显示的初始呈现<Parent/> isDirty为false。但是，更改值不会触发<Parent/>使用新值重新呈现。

更新：

经过进一步调查，我认为这是一个错误：

const mapStateToProps = (state) => {
  console.log(isDirty('myForm')(state)
  return {
    ...
    isDirty: isDirty('myForm')(state),
  }

此处，更改表单值会mapStateToProps按预期触发，但isDirty始终为false。

我尝试使用redux-form在react-redux上实现文件上传，但是控制台中有警告和异常：

警告：ConnectedField正在更改要控制的类型文件的不受控制的输入。输入元素不应从不受控制切换为受控制（反之亦然）。确定在组件的使用寿命期间使用受控或不受控制的输入元素。

bundle.js:37467 Uncaught DOMException: Failed to set the 'value' property on 
'HTMLInputElement': This input element accepts a filename, which may only be 
programmatically set to the empty string.
        at Object.updateWrapper (http://localhost:8080/dist/bundle.js:37467:20)
        at ReactDOMComponent.updateComponent (http://localhost:8080/dist/bundle.js:36891:23)
        at ReactDOMComponent.receiveComponent (http://localhost:8080/dist/bundle.js:36846:10)
        at Object.receiveComponent (http://localhost:8080/dist/bundle.js:6247:22)
        at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:8080/dist/bundle.js:35859:23)
        at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:8080/dist/bundle.js:35829:10)
        at ReactCompositeComponentWrapper.updateComponent (http://localhost:8080/dist/bundle.js:35750:12)
        at ReactCompositeComponentWrapper.receiveComponent (http://localhost:8080/dist/bundle.js:35652:10)
        at Object.receiveComponent (http://localhost:8080/dist/bundle.js:6247:22)
        at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:8080/dist/bundle.js:35859:23)

这是我组件的代码：

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

class UploadFileForm extends Component {

  onFormSubmit(data) {
    console.log(data);
  };

  render() { …

我想在nativebase中使用redux-form，但它的功能与在Web中使用的功能不同。我不认为我的onSubmit回调没有被调用，我也不知道为什么。

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import {
  Container,
  Content,
  Item,
  Input,
  Button,
  Form,
  Label,
  Text,
  Icon
} from 'native-base';

import * as actions from '../actions';

class Signin extends Component {
  handleFormSubmit({ username, password }) {
    this.props.userSignIn({ username, password });
  }

  renderUsername() {
    return (
      <Item floatingLabel>
        <Icon name="ios-person" />
        <Label>Username</Label>
        <Input autoCorrect={false} autoCapitalize="none"/>
      </Item>
    );
  }

  renderPassword() {
    return (
      <Item floatingLabel>
        <Icon name="ios-lock" />
        <Label>Password</Label>
        <Input secureTextEntry={true} …

谁能提供有关Redux-Logger过滤操作的提示？我正在尝试过滤@@redux-form/BLUR来自Redux Form的内容。

根据Redux Logger食谱（ https://github.com/evgenyrodionov/redux-logger#log-everything-except-actions-with-certain-type）

Log everything except actions with certain type

createLogger({
  predicate: (getState, action) => action.type !== AUTH_REMOVE_TOKEN
});

基于上面引用的方法，我希望提供一条语句，该语句的格式类似，并返回false。我正在记录成功通过折叠选项的记录，因此我不会怀疑我在applyMiddlewear（）中做错了什么。

predicate:(getState, action) => action.type !== @@redux-form/FOCUS || @@redux-form/BLUR || @@redux-form/FOCUS