我收到此警告：

Warning: The `value` prop supplied to <select> must be a scalar value if `multiple` is false. Check the render method of `Control`.

我正在使用 React Redux 表单https://davidkpiano.github.io/react-redux-form/docs/api/Control.html#prop-defaultValue。

数据以对象数组的形式出现，以显示在选择选项元素内。我不想将控件变成倍数，因为我们只希望用户选择一个值。

我将如何解决此警告？

我有一个redux-form连接到我的应用程序状态,一切似乎都很好.我可以获取数据并将其加载到我的表单中,然后提交数据并获取我想要的元数据...

但是,我有一个自定义交互(颜色选择器),需要动态更改托管字段的值.我尝试的所有内容都会改变屏幕,但不会改变redux格式状态,即当我提交表单时,我只获取原始字段数据而不是表单中显示的新数据.

下面的版本是将字段props传递给组件并尝试使用ColorSelect组件状态作为字段值.我也试过创建一个动作创建者,但是同样的结果和更多的代码,这个例子......

注:react@^15.4.2,react-redux @^5.0.2,redux-form @^6.4.3

ES6:CollectionForm.js

...
import ColorSelect from './ColorSelect';


class CollectionForm extends Component {

    /**
     * On form submit accepted
     * @param values
     */
    onSubmit(values){

        //See screenshot for evidence
        log('Updating collection:', 'warn', values);

        //values.color is grey and not yellow!
        this.props.dispatch(updateCollection(values));
        return;
    }

    /**
     * Form render
     * @return {JSX}
     */
    render()
    {
        const { handleSubmit, submitting } = this.props;

        return (
            <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                <Field component={renderTextInput} name="name" type="text" label="Name"/>
                <Field component={ColorSelect} name="color" />

                <div class="field-buttons right-align group">
                    <Button …

如何在反应原生中以redux形式设置隐藏字段？

我jsut找不到任何方法如何做到这一点.任何帮助？

我在React.js中使用Redux表单和我的表单,我有一个自定义谷歌地图组件我想绑定lat和long到我的表单

形成

import React from 'react';
import { Field, reduxForm } from 'redux-form';
const SimpleForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div className="position-relative form-group">
        <label>First Name</label>
        <div>
          <Field
            name="firstName"
            component="input"
            type="text"
            placeholder="First Name"
            className="form-control"
          />
        </div>
      </div>
<Field name = 'eventLocation'
        component = {MyParentComponentWrapper} />
</form>
  );
};
export default reduxForm({
  form: 'simple', // a unique identifier for this form
})(SimpleForm);

我的MyParentComponentWrapper代码是

import React from 'react';
import { compose, …

我正在使用redux-form启用服务器端验证,当用户提交SignUp表单时,如果服务器响应错误,则表单显示错误...在这种情况下,错误的状态为422从服务器,并正在响应w {"errors":{"email":["has already been taken"]}}

当表单提交正常时,我无法在表单上显示SubmissionError.我在JS控制台中收到以下错误:

Unhandled rejection SubmissionError: Submit Validation Failed

我对redux-form提交验证处理有什么问题？谢谢

SignUpForm

const ensureValid = response => {
  if (response.status === 422) {
    return response.json().then(({errors}) => {
      throw new SubmissionError({
        email: 'Already in Use',
        _error: 'failed!',
      });

    });
  }
  return response;
};

class SignUp extends React.Component {

  handleSubmit(data) {
    const request = new Request('http://localhost:4400/auth/', {
     method: 'POST',
     headers: new Headers({
       'Accept'       : 'application/json',
       'Content-Type' : 'application/json',
     }),
     body: JSON.stringify({ user: data })
    });

    fetch(request).then(ensureValid).then(response => {
      return tryLogin(response, …

我有一个通过redux-form字段连接的FileUpload组件.在输入字段中选择文件时,它将input.onChange和input.onBlur调用所选文件作为base64字符串.

我正在使用asyncValidator redux-form选项来验证图像的尺寸,我希望在异步验证完成后将文件上传到我的服务器.

似乎没有记录任何类型的afterAsyncValidation挂钩.以redux形式实现此目的的最佳方法是什么？

我试图使用React refs在安装时聚焦Redux-Form字段.

当我尝试this.refs.title.getRenderedComponent().focus()时componentDidMount,会抛出一个错误:

edit_fund.js:77 Uncaught TypeError: Cannot read property 'getRenderedComponent' of undefined

当我在console.log this.refs中时,它主要是一个空对象,有时将'title'标识为ref,但它不可靠.

我错误地使用了refs吗？我的代码在下面供参考.

componentDidMount = () => {
  this.refs.title
  .getRenderedComponent()
  .focus();
}

...

 <Field
    id="title"
    name="title"
    component={FormInput}
    type="text"
    ref="title" withRef
 />

我使用redux来隐藏和显示基于值的组件.

Redux表单文档提到以下内容:

应谨慎使用连接到多个字段,因为每次连接的任何字段都需要整个组件重新渲染.这可能是性能瓶颈.除非您绝对需要,否则您应该单独连接到您的字段.

我不清楚我的隐藏和显示基于单选按钮的字段的解决方案是否足够好,可以使用Fields警告谨慎使用.

您能否澄清我的组件是否值得使用Fields.如果没有,有什么替代方法可以实施？

另外,如何fields实现验证？

<div>
    <form>
      <Fields
       component={RadioButtonGroupField}
       names={['radioButtonGroup', 'nameTextField', 'nickNameTextField']}
      />
    </ form>
</div>

function RadioButtonGroupField(fields) {
    return(
      <div>
        <RadioButtonGroupComponent
          {...fields.radioButtonGroup.input}
          {...fields.radioButtonGroup.meta}
        />
        {
          (fields.radioButtonGroup.input.value === 'name' ||
          fields.radioButtonGroup.input.value === 'both') &&
          <NameTextFieldComponent
            {...fields.radioButtonGroup.input}
            {...fields.radioButtonGroup.meta}
          />
        }
        {
          (fields.radioButtonGroup.input.value === 'nickname' ||
          fields.radioButtonGroup.input.value === 'both') &&
           <NicknameTextFieldComponent
            {...fields.radioButtonGroup.input}
            {...fields.radioButtonGroup.meta}
          />
        }
      </div>
     );
  }

我正在尝试为ReactReduxForm的Control组件创建一个包装类来添加其他功能.这是基类/组件定义:

export class Control<T> extends React.Component<ControlProps<T>, {}> {
    static custom: React.ComponentClass<ControlProps<HTMLInputElement>>;
    static input: React.ComponentClass<ControlProps<HTMLInputElement>>;
    static text: React.ComponentClass<ControlProps<HTMLInputElement>>;
    static textarea: React.ComponentClass<ControlProps<HTMLTextAreaElement>>;
    static radio: React.ComponentClass<ControlProps<HTMLInputElement>>;
    static checkbox: React.ComponentClass<ControlProps<HTMLInputElement>>;
    static file: React.ComponentClass<ControlProps<HTMLInputElement>>;
    static select: React.ComponentClass<ControlProps<HTMLSelectElement>>;
    static reset: React.ComponentClass<ControlProps<HTMLButtonElement>>;
    static button: React.ComponentClass<ControlProps<HTMLButtonElement>>;
}

我想覆盖onKeyPress所有类型的控件(例如输入,文本,文本区域等)的功能,这些控件是基Control类/组件的静态属性.

这是我的派生类的骨架定义:

import * as React from "react";
import { Control } from "react-redux-form";

export class CustomControl<T> extends Control<T> { }

我希望以下功能适用于以下所有控件类型(例如,文本,选择等)CustomControl:

  onKeyPress(e: any) {
    if (e.key === "Enter") {
      e.preventDefault();
    }
  } …

我正在尝试根据下拉值选择来验证 redux-form，下面是代码和错误。

我得到Uncaught Error: Maximum update depth exceeded.当组件在componentWillUpdate或 中重复调用 setState 时可能会发生这种情况componentDidUpdate。React 限制嵌套更新的数量以防止无限循环。

请帮助我并提前致谢

    ...
      <Field
        id="user-form-email"
        name="email"
        component={emailField}
        className={style.inputField}
        fullWidth
        label={i18n({ id: "users.email" })}
        validate={[emailRequiredForAdmin("role")]}
        disabled={selectedRole === "manager"}
      />

      <Field
        id="user-form-roles"
        name="role"
        component={userRoleSelectField}
        className={style.inputField}
        fullWidth={true}
        items={getRoles(intl)}
        label={i18n({ id: "users.role" })}
        onChange={(event) => {
          if (event.target.value == "user") {
            this.props.change("password", "");
            this.props.change("confirmPassword", "");
          }
        }}
      />
    ...

// Decorate with redux-form

UsersForm = reduxForm({
  form: formNames.USER,
})(UsersForm);

const selector = formValueSelector(formNames.USER);

UsersForm = connect((state) => …