标签: redux-form

我正在尝试使用提交验证进行表单.当我提交表格时,我handleSubmit被解雇并抛出SubmissionError,但没有任何事情发生.

提交(每次只抛出错误):

function submit(values)
{
   console.log(values);
   throw new SubmissionError({ password: 'Wrong password', _error: 'Login failed!' });
}

从示例中渲染字段:

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
     <input {...input} placeholder={label} type={type}/>
     {touched && error && <span>{error}</span>}
   </div>
  </div>
 )

我的表格:

class LoginForm extends Component {
  render()
  {
    const {  error, handleSubmit, pristine, reset, submitting  } = this.props
    console.log(error);
    return (
      <div>
        <form onSubmit={handleSubmit}>
          <h1>Login</h1>
          <Field name="email" type="text" …

我有一个形式繁重的应用程序,我希望尽可能多地控制,同时使用尽可能少的依赖项.为此,我想利用redux-form v6的自定义Field组件API,并制作一堆我可以随意放入的自定义组件.其中一个组件是下拉选择.

问题是自定义下拉组件未连接到状态,即使它呈现正常.

在文档中,示例完成此操作:

<Field name="favoriteColor" component="select">
  <option></option>
  <option value="#ff0000">Red</option>
  <option value="#00ff00">Green</option>
  <option value="#0000ff">Blue</option>
</Field>

我正在寻找一种即插即用的方法,我可以放入一个组件,并在道具中输入一组数据:

Form.js:

      <div className="form-group">
        <label htmlFor="dropDownSelect">Select an Option</label>
        <Field
          name="dropDownSelect"
          component={DropDownSelect}
          people={people}
          className="form-control"
        >
        </Field>
      </div>

DropDownSelect.js:

import React from 'react';

import styles from './styles.css';

class DropDownSelect extends React.Component { // eslint-disable-line react/prefer-stateless-function
  renderSelectOptions = (person) => {
    return (
      <option key={person} value={person}>{person}</option>
    );
  }

  render() {
    return (
      <select>
        {this.props.people.map(this.renderSelectOptions)}
      </select>
    );
  }
}


export default DropDownSelect;

当我检查Redux DevTools时,字段的值在与下拉列表交互时永远不会填充:

我为两个字段选择了一个值,但只有'effDate'填充了一个值,而'dropDownSelect'仍然是一个没有值的注册字段.

编辑:

根据这个例子,我想这样做的方法就像:

function …

我试图在基于Typescript的项目中使用名为redux-form的库.当我采用他们的"简单形式"示例代码并实现它时,我得到一个错误:

error TS2604: JSX element type 'SimpleForm' does not have any construct or call signatures.

我究竟做错了什么？我安装了这个lib的定义文件,所以要么我编码错误,要么定义文件不正确.

在我的表单组件中(剥离代码向下以使其尽可能精简):

import * as React from 'react';
import {reduxForm} from 'redux-form';
export const fields = ['firstName'];

class SimpleForm extends React.Component<any, any> {

  static propTypes = {
    fields: React.PropTypes.object.isRequired,
  };

  render() {
    const {
      fields: {firstName}
      } = this.props;
    return (<form>
        <div>
          <label>First Name</label>
          <div>
            <input type="text" placeholder="First Name" {...firstName}/>
          </div>
        </div>

        <div>
          <button>
            Submit
          </button>
        </div>
      </form>
    );
  }
}

export default reduxForm({ …

使用Redux-Form中的initializingFromState示例,我试图动态设置它.这是为了编辑书籍列表中的特定书籍,并使用在express.js中设置的简单api.

整个容器在下面.我不知何故需要initialValues在mapStateToProps函数内传入.在这个例子中,它是通过一个静态对象完成的,但我无法弄清楚如何使用我通过via引入的信息fetchBook,并将其传递给initialValues.

容器:

import React, { Component, PropTypes } from 'react';
import { reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { fetchBook, editBook } from '../actions/index';

class BookEdit extends Component {

  componentWillMount() {
      this.props.fetchBook(this.props.params.id);
  }

    static contextTypes = {
    router: PropTypes.object
    }

  onSubmit(props) {
    this.props.editBook(this.props.book.id, props)
      .then(() => {
        this.context.router.push('/');
      });
  }

    const data = {
        title: {this.props.book.title},
        description: {this.props.author} …

我有一个成功使用redux-form onSubmit来调用动作创建者的组件.创建者执行ajax调用,但从不调度该操作以将其保存到商店.我必须在react-redux和redux-form的连线中弄乱一些东西,可能是在动作创建者的绑定中.我已经阅读了我在Google上找到的所有内容,但仍无法找到问题所在.有任何想法吗？(我已经包含了redux-promise来处理请求的承诺,但它从来没有这么做过)

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import validate from '../utils/add_person_validation';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { addPersonResponseAction } from '../actions/index';
import renderField from '../components/render_input_field';

// call the action creator - this part succeeds 
const doSubmit = function(values) {
  addPersonResponseAction(values);
};


let AddPersonContainer = (props) => {
  const {
    handleSubmit,
    pristine,
    reset,
    submitting
  } = props;


  return (
    <div className="row">
      <form onSubmit={handleSubmit(doSubmit)} >
          <div className="col-sm-6">
              <fieldset> …

我想问一下,这是一个场景.我有这个多个复选框但我的问题是每当我勾选一个复选框时,所有4个复选框都被选中.而且为什么复选框的值只是真或假.这是我的复选框:

<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value="Seed" /> Seed</label>
</div>
<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value="Early Stages" /> Early Stages</label>
</div>
<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value="Formative Stages" /> Formative Stages</label>
</div>
<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value=" Later Stages" /> Later Stages</label>
</div>

我正在使用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, …

看起来 google recaptcha 的工作方式是，如果使用特定令牌进行了验证尝试，则无法再次使用。

文档指出“您将需要调用 grecaptcha.reset() 以要求最终用户再次使用 reCAPTCHA 进行验证”

我正在尝试使用 react-google-recaptcha npm 包尝试此操作。

这是我的代码：

function onChange(grecaptcha) {
  console.log(grecaptcha);
  grecaptcha.reset(); // this doesn't work
}

class Captcha extends React.Component {
  render() {
    return <div>
      <Recaptcha
          sitekey='#'
          onChange={onChange(this)}
      /> </div> 
  }
}

当我尝试使用带有响应和秘密值的 google api https://www.google.com/recaptcha/api/siteverify进行服务器端验证时，成功响应在第一次验证后始终评估为“false”。为了防止这种情况，我按照文档中的建议重置了 grecaptcha，但它不起作用。

有什么我想念的吗？

提前致谢

编辑：

https://github.com/dozoisch/react-google-recaptcha提供了 reset() 实用程序函数，这是我在用户解决验证码后尝试调用的函数，想知道我是否没有正确调用它。

我有以下redux-form组件,我想使用isSubmitting选择器来禁用提交按钮.但是,在表单提交时,它永远不会返回true

我的mapStateToProps功能:

const mapStateToProps = (state, props) => {
  const firstTemplate = _.first(props.templates.toList().toJS());
  const course = props.courses.getIn([0, 'id']);
  let values = { submitting: isSubmitting('CreateNewAssignmentForm')(state) };
  if (firstTemplate === undefined) {
    return values;
  }

  if (firstTemplate) {
    values = {
      course,
      template: firstTemplate,
      submitting: isSubmitting('CreateNewAssignmentForm')(state),
      initialValues: {
        template: firstTemplate.id,
        wordCount: firstTemplate.essay_wordcount,
        timezone: momentTimezone.tz.guess(),
        label: 'TRANSPARENT',
      },
    };
  }

  return values;
};

export default connect(mapStateToProps)(
  reduxForm({
    form: 'CreateNewAssignmentForm',
    destroyOnUnmount: false,
    shouldAsyncValidate,
    shouldValidate,
  })(CreateNewAssignmentForm),
);

我的render()功能的部分片段:

  render() …

我有一个react.js redux-form,可以工作并将数据发布回我的API,但我还需要让提交者上传带有表单的图像,理想情况下是预览.我有点挣扎,已经到达了dropzone.js,但我似乎无法让我的表单实际发回图像数据.

render () {
  const FILE_FIELD_NAME = 'files';

    const renderDropzoneInput = (field) => {
      const files = field.input.value;
      return (
        <div>
          <Dropzone
            name={field.name}
            onDrop={( filesToUpload, e ) => field.input.onChange(filesToUpload)}
          >
            <div>Try dropping some files here, or click to select files to upload.</div>
          </Dropzone>
          {field.meta.touched &&
            field.meta.error &&
            <span className="error">{field.meta.error}</span>}
          {files && Array.isArray(files) && (
            <ul>
              { files.map((file, i) => <li key={i}>{file.name}<img src={file.preview}/></li>) }
            </ul>
          )}
        </div>
      );
    }

    return (
        <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
          <div className="form-group">
            <Field name="files" component={renderDropzoneInput} />
          </div> …