标签: react-redux-form

我有一个redux表单,提交时,导致整个浏览器页面刷新,这是不希望的...

我在这里做错了什么导致页面在提交时刷新？谢谢!

Rate.js

import React from 'react';
import RateForm from '../../components/rate/RateForm';

class Rate extends React.Component {

  handleSubmit(data) {
    alert('x')
    console.log('handleSubmit');
    console.log(data);
  }

  render() {

    const fields = [
          {
            name: 'execution',
            type: 'select',
            options: [
              { label: '5', value: '5' },
            ],
          },
        ]

    return (
      <div>
        <RateForm fields={fields} handleSubmit={this.handleSubmit.bind(this)} />

      </div>
    )
  }
}

export default Rate;

RateForm.js

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

const renderField = ({ input, field }) => {
  const …

action.payload被称为何时，何地，为什么？请任何人帮助我了解action.payload的实际用途。我已经搜索了很多siteS，但没有得到。

我正在尝试根据下拉值选择来验证 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) => …

是否可以在Redux表单中使用react-toggle？

react-toggle呈现如下所示的切换：

<Toggle
  icons={false}
  onChange={this.handleToggleChange}
/>

给定一个redux形式的Field组件，如下所示：

              <Field
                name="email_newsletter"
                id="email_newsletter"
                component="input"
                type="checkbox"
              />

如何使用react-toggle更新redux-form字段的值？

我正在建立一个反应本机应用程序,我正在使用Redux-form作为我的注册表单.我目前有一个表单并且成功,但我想仅在成功的情况下导航到下一页.在我的代码中,我使用的是redux-form的onSubmitSuccess函数,我需要使用props导航到下一页,但是当我尝试在onSubmitSuccess中使用props时,它告诉我"没有定义道具".在redux-form v6.5.0中,你可以将props传递给onSubmitSuccess,但我不确定如何做到这一点.这是它的文档:https://github.com/erikras/redux-form/blob/master/docs/api/ReduxForm.md#onsubmitsuccess--function-optional

以下是我的代码片段:

render() {
      const {handleSubmit, touched, error} = this.props

      const onSubmit = (values, dispatch) => {
        this.props.addFirstName(values.firstName)
        this.props.addLastName(values.lastName)
        this.props.addEmailAddress(values.emailAddress)
        this.props.addPassword(values.password)
      }

      return (
          <Container>
                  <View theme={theme}>
                      <Image source={require('../../../images/BG-signUp.png')} style={styles.background} >
                          <Content padder scrollEnabled={false}>
                              <Text style={styles.signupHeader}>
                                  CREATE ACCOUNT
                              </Text>
                              <View style={styles.signupContainer}>
                                <Field name = "firstName" component = {renderFirstName} />
                                <Field name = "lastName" component = {renderLastName} />
                                <Field name = "emailAddress" component = {renderEmailAddress} />
                                <Field name = "password" component = {renderPassword} />
                                <Field name = …

在我的react redux表单中，我具有以下内容：

        <fieldset className="form-group">
          <legend>Radio buttons</legend>
          {this.props.job_titles.map(jobTitle => (
          <div className="form-check" key={jobTitle.id}>
            <label className="form-check-label">
              <Field
                name="job_title_id"
                component="input"
                type="radio"
                value={jobTitle.id}
              />
              {' '}
              {jobTitle.title}
            </label>
          </div>
          ))}
        </fieldset>

这将正确呈现单选按钮，但是单击以选择单选按钮时，单选按钮永远不会设置为选中状态。您无法选择一个选项-表单已损坏。

什么是奇怪的是，如果我更新：value={jobTitle.id}到value="anything"那么单选按钮可以选择。

我没有在redux表单文档中看到有关动态生成的单选按钮的任何内容。我究竟做错了什么？

谢谢

我有一个问题，当我将鼠标指针聚焦到文本框然后移除焦点时，它会显示验证错误。我想要实现的是当用户只是提交表单或按下提交按钮时，验证就会发生。

到目前为止，这是我的代码：

const form = reduxForm({
    form: 'BoardAddModalForm',
    validate
});

const renderField = field => (
    <div className="form-group">
        <input className={[forms.inputTextboxMd,"form-control"].join(' ')} {...field.input} type={field.type} placeholder={field.placeholder} autoComplete="off" />
        <div className={utils.errorText}>{field.meta.touched && field.meta.error && <span>{field.meta.error}</span>}</div>
    </div>
);

function validate(formProps){
    const errors = {};

    if(!formProps.name){
        errors.name = "Board name is required";
    }

    return errors;
}
class BoardAddModal extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            name: ''
        };
    }

    addBoard(formProps) {
        this.props.dispatch(reset('BoardAddModalForm'));
    }

    render() {

        const { error, handleSubmit } = this.props;
        return …

我尝试使用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() { …

我有一个由几个经典字段和两个 FieldArray 组成的表单。这些 FieldArray 位于不同的部分，但相互关联。当我向 FieldArray A 添加一个项目（一行不同类型的字段）时，应该为 FieldArray B 构建另一行。FieldArray A 和 B 的不同之处在于它们表示不同的字段集合和结构，但是，当将一行添加到 A 中时，也必须将一行添加到 B 中。

为了向 FieldArray A 添加一行，我遵循记录的方法，在 FieldArray A 的包装组件内使用Push方法进入 prop 字段。但是，我无法访问 FieldArray B 的 prop 字段。该 prop 只是可从 FieldArray B 内的包装组件内访问。

是否有其他方式或方法可以从外部访问 FieldArray B 的 prop 字段？formValues() 或 formValuesSelector() 没有用。

我是 React 的新手，并用他们的 API 构建了一个 Spotify 应用程序。我正在使用 Redux Promise 来解决所有的承诺。当我在数据的减速器中对其进行控制台时，我可以看到数据。但是当我检查我的控制台时，它显示 Connect(App) 中的 mapDispatchToProps() 必须返回一个普通对象。而是收到了 [object Promise]。我在想是不是因为我使用的是 Redux Promise 与 thunk，但它不应该也能解决它们吗？

减速器

import { NEW_RELEASES }  from '../actions/types';

export default function(state = [] , action){
    console.log(action)
    switch(action.type){
        case NEW_RELEASES:
        return [ action.payload.data, ...state ];
    }
    return state
}

店铺

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './App';
import reducers from './reducers';
import ReduxPromise from …

我已经使用 redux-form 库实现了一个表单。该表单有 3 个字段。

1. 名字（输入类型）
2. 姓氏（输入类型）
3. 最喜欢的颜色（选择/下拉类型）

当用户更改其最喜欢的颜色（下拉菜单）时，我试图实现什么。只有姓氏字段被清除，表格的任何其他字段都没有（即名字和最喜欢的颜色字段应保持不变）。

我已经实现了给定的要求，示例代码在下面共享。

存储文件配置

    const reducer = combineReducers({
      form: reduxFormReducer.plugin({
        mySimpleForm: (state, action) => {
          if(action.type === "@@redux-form/CHANGE" && action.meta.form === "mySimpleForm" && action.meta.field === "favoriteColor") {
            const newState = {...state};
            delete(newState.values.lastName);
            return newState;
          }
          return state;
        }
      })
    });
    const store = createStore(reducer);

表格显示代码

    const SimpleForm = props => {
        const { handleSubmit, pristine, reset, submitting } = props;

        return (
          <form onSubmit={handleSubmit}>
            <div>
              <label>First Name</label>
              <div>
                <Field
                  name="firstName"
                  component="input"
                  type="text"
                  placeholder="First …

<Field
   defaultChecked={ true }
   onChange={ this.handleFormItemRadio }
   component={ "input" }
   type={ "checkbox" }
   name="tAdmin"
/>

当该字段被初始化时，我希望它被选中，但即使我提供了一个true值，它也不会被选中。

我被指出了许多解决方案，但仍然无法解决这个问题。

下面是我的RequestAnInviteredux-form ...问题是当我提交表单时,submitting从未更改为true..你可以看到我有一个下面的日志,它总是输出false.

当我提交表单时,我做错了什么,以及使提交从未设置为真的还原形式？谢谢

class RequestAnInvite extends React.Component {

  componentDidMount() {
    this.props.dispatch(loadTitles());
  }

  handleSubmit(data) {
    console.log(data);this.props.dispatch(requestInvitationsActions.createInvitationRequest(data));
  }

render() {
  const { handleSubmit, submitting } = this.props;

  console.log('submitting: ' + submitting);

    return (
      <div className="container-fluid h-100">  
        <form onSubmit={handleSubmit(this.handleSubmit.bind(this))}>
          <Field
            name="email"
            type="text"
            component={renderField}
            label="Email"
            placeholder="xxx@acme.com"
          />

        <p>submitting: {submitting}</p>

          <div className="form-group form-group-actions">
            <button type="submit" className="btn btn-primary" disabled={submitting}>
              {submitting ? 'Requesting...' : 'Request an Invite'}
            </button>
          </div>

        </form>
      </div>
    );
  }

}


RequestAnInvite = reduxForm({
  form: 'RequestAnInvite', …