标签: redux-form

如何使用redux-form和Fetch API 进行服务器端验证？文档中提供了" 提交验证 "演示,其中说服务器端验证的推荐方法是从onSubmit函数返回一个promise.但是我应该把这个承诺放在哪里？据我所知,onSubmit函数应该是我的动作.

<form onSubmit={this.props.addWidget}>...

this.props.addWidget实际上是我的行动,如下所示.

import fetch from 'isomorphic-fetch';
...
function fetchAddWidget(widget, workspace) {
    return dispatch => {
        dispatch(requestAddWidget(widget, workspace));
        return fetch.post(`/service/workspace/${workspace}/widget`, widget)
            .then(parseJSON)
            .then(json => {
                dispatch(successAddWidget(json, workspace));
                DataManager.handleSubscribes(json);
            })
            .catch(error => popupErrorMessages(error));
    }
}

export function addWidget(data, workspace) {
    return (dispatch, getState) => {
        return dispatch(fetchAddWidget(data, workspace));
    }
}

如您所见,我使用fetch API.我期望fetch将返回promise并且redux-form将捕获它但是这不起作用.如何使它与示例中的承诺一起工作？

同样从演示中我无法理解this.props.handleSubmit函数应该提供什么.对我来说,演示不解释这一部分.

我正在研究react-select图书馆并面临一些问题,我正在使用redux-form库并<Field />从中导入组件.这样我就可以通过表单将值提交给服务了.

我的问题:

当我使用react-select的默认值时,下面提到的代码工作正常.我可以从下拉列表中选择值,即使在聚焦时也会选择该值,该值将保留.但选择的值不是通过表单提交,因为<Select>这就是我包装组件和使用的原因redux-form

import React from 'react';
import Select from 'react-select';
import RenderSelectInput from './RenderSelectInput'; // my customize select box

var options = [{ value: 'one', label: 'One' }, { value: 'two', label: 'Two' }];


class SelectEx extends React.Component {
    constructor() {
        super();
        this.state = { selectValue: 'sample' }
        this.updateValue = this.updateValue.bind(this);
    }

    updateValue(newValue) {
        this.setState({ selectValue: newValue })
    }

    render() {

        return (
            <div>
                <Select name="select1" id="selectBox" value={this.state.selectValue} options={options} …

我使用redux-form渲染下面的简单形式,它运行良好.现在,我想在一个更多的情况下禁用提交按钮:如果任何Field一个有错误(即它meta.error已设置).

从lokking到文档,我想周围的人不可能<form>知道它的<Field>组件是否有错误.也许任何人都有一个想法,如何解决它就像使用一样简单disabled={hasErrors || submitting || pristine}

const EditBlogEntryForm = ({ onSubmit, reset, handleSubmit,
                         pristine, submitting, ...rest }) => {
    console.log('rest: ', rest);
    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <div className="form-group">
                <Field name="title"
                    type="text"
                    component={renderField}
                    label="Titel"
                    className="form-control"
                    placeholder="Titel eingeben..." />
            </div>
            <div className="form-group">
                <Field name="text"
                    component={renderTextArea}
                    label="Text"
                    className="form-control"
                    placeholder="Textinhalt eingeben..." />
            </div>  
            <div className="form-group">
                <Field name="image"
                    type="text"
                    component={renderField}
                    label="Bild-URL:"
                    className="form-control"
                    placeholder="Bildadresse eingeben..." />
            </div>  
            <div>
                <button type="submit" className="btn btn-default"
                    disabled={submitting || pristine}>
                    Blogeintrag speichern …

我相信任何应用都应该有一个真理来源.

我的应用程序将有

• 90多种交易表格和150份报告
• 复杂的数据结构(父级,子级,计算)

所以在React中我找到了三个令人困惑的地方来存储状态:

1. 组件状态-使用时,我们不希望共享数据
2. Redux自定义商店(由开发人员管理) - 在我们想要共享数据时使用
3. Redux-form商店(由redux-form管理) - 用于验证

我开始使用redux表单进行验证,然后当我允许我访问数据的redux-form存储时,我感到困惑,因为我已经从组件状态访问数据而且还从我在redux中的自定义商店访问数据

1. Redux表单不会注册隐藏字段.要注册隐藏字段,您必须创建具有禁用属性的字段等.

2. 如果你做任何计算,如 AMOUNT = QTY*RATE; 这里用户将输入QTY和RATE并且将计算AMOUNT.在这里,它将立即反映在组件状态,但不是在redux-form状态.为了使它以redux形式反映,我们必须开火.

   this.props.dispatch(change('Invoice', 'amount', 55))

3. 如果我写计算公式代码看起来像这样,则不可能总是避免组件状态

   只有Redux形式的状态

   const amount = someReduxFormApiGet(QTY) + someReduxFormApiGet(RATE) this.props.dispatch(change('Invoice', 'amount', 55))

   只有反应状态

   onChange(){ will have set QTY & RATE in component state} const amount = this.state.QTY * this.state.RATE

   结论:如果我继续使用,redux-form我将不得不编写额外的代码以使redux-store稳定同步,其中React组件中的状态将具有handleChange()将绘制状态的函数this.state.还觉得我将在组件状态方面具有很大的灵活性

4. 如果我的数据模型变得更复杂,那么在redux-form商店中管理将非常困难.然后在这里我想不使用redux自定义存储或组件状态

5. 其他验证React输入的库不使用Redux来实现验证.它只是使用redux来管理验证的redux-form.

所以我得出结论

• Redux-form的诞生仅仅是为了验证,而不是为了管理复杂的数据模型.

• 复杂数据模型应相应地在redux自定义存储或组件状态中进行管理

• 从Redux-form的文档中可以很好地处理验证,但是出于数据建模的目的,它建议的解决方案不是100%直截了当

在决定时需要帮助

我应该使用redux-form存储进行数据建模

要么

只是用于验证

和

使用组件状态和自定义redux存储来建模数据？

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import  createHistory  from 'history/createBrowserHistory';
import { Provider } from 'react-redux';
import  ConnectedRouter  from 'react-router-redux';
import { Route, Switch } from 'react-router';
import Home from "./pages/Home";
import Register from "./pages/Register";
import CourseManagerDashboard from "./pages/CourseManagerDashboard";
import CourseDetail from "./pages/CourseDetail";
import App from './app/App';
import LoginForm from './components/LoginForm';

const store = createStore(
    state => state
);
const history = createHistory();

ReactDOM.render((
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <Switch>
                <Route name="home" exact …

我正在使用react redux形式字段,我有下拉类.我可以从下拉菜单中选择任何一个班级.但问题是,当我从下拉列表中选择任何值(类)时,我想触发onChange操作.当我用on on触发动作时,下拉值没有设置,也没有显示选定的值.我正在使用以下代码行

<Field name="class._id" component="select" className="form-control" onChange={this.onChange.bind(this)} >
              <option value="">Select class...</option>
              {this.props.classes.map(Class =>
              <option value={Class._id} key={Class._id} >{Class.name}</option>)}
</Field>

这里是onChange函数

 onChange(){
     console.log(" Triggered")
  }

如果我没有设置onChange事件,我的下拉工作正确,它会正确显示所选值和正确的文本.但是我想在每次使用时调用函数选择任何值

我在使用redux-form的模态中有一个表单.我有几个文本字段,但您无法输入它们.我怀疑文本字段没有onChange从redux-form中获取事件,但我找不到任何线索我做得好.

我的代码是:

import React from 'react'
import { Button, Modal, Form, Message } from 'semantic-ui-react'
import { Field, reduxForm } from 'redux-form'

const renderField = ({ input, label, type, meta: { touched, error, warning } }) => {
  console.log(input)
  return (
  <Form.Field>
    <label>{label}</label>
    <input {...input} placeholder={label} type={type} />
    {touched && (error && <Message error>{error}</Message>)}
  </Form.Field>
)}

let AddNewModal = (props) => {
  const { handleSubmit, pristine, submitting, closeNewSite, isAddNewOpen, submit } = props

  return (
    <Modal dimmer='blurring' open={isAddNewOpen} …

我喜欢在表单挂载后重新触发验证.假设我每次单击名为"验证输入"的按钮时都要运行验证.

这该怎么做？

相关问题:

• 如何在一个redux-form FieldArray状态的片上运行验证
• Redux Forms中是否有一种方法可以从代码中进行表单验证？

我搜索并尝试了很多使用redux-form库的反应形式的select输入类型.

一切正常,所有其他输入类型都可以,但不能选择以下操作:初始化,检索提交的值等.

我尝试使用模型道具"select"并使用我自己的函数来渲染它.当我使用模型的选择版本时,我设法获得组合框字段的选项,但我无法设置值并在提交时检索它.凭借我自己的功能,我甚至无法将选项设置为列表...

这是我的代码:

// FormComponent file
const { handleSubmit } = this.props;
...
<form onSubmit={handleSubmit(this.props.onSubmitProfileUpdate)}>
    <Field name='ranking' className='input-row form-group form-control' component={renderSelectField}>
                        {tennisRankings.map(ranking =>
                          <option value={ranking} key={ranking}>{ranking}</option>
                        )}
                      </Field>
...
ProfileForm.propTypes = {
  user: React.PropTypes.object,
  fields: React.PropTypes.shape({
    firstname: React.PropTypes.string,
    lastname: React.PropTypes.string,
    ranking: React.PropTypes.string,
    email: React.PropTypes.string,
    telephone: React.PropTypes.string,
    city: React.PropTypes.string
  }),
  errorMessage: React.PropTypes.string,
  confirmationMessage: React.PropTypes.string,
  onSubmitProfileUpdate: React.PropTypes.func.isRequired,
  handleSubmit: propTypes.handleSubmit,
  initialize: propTypes.initialize
};

export default reduxForm({
  form: 'profile',
  validate: validateProfileForm
})(ProfileForm);

我的渲染字段的功能:

// Functions shared
export const renderSelectField = (field) => { …

我有一个简单的待办事项应用程序,其中我的redux商店包含一系列'todos'.我的'Todo'组件映射到商店中的每个'todo',并呈现使用redux-forms v6的'TodoForm'组件.

就像现在一样,每个'todo'都共享相同的表单名称/密钥,所以每次我在'title'字段中输入内容时,它都会改变每个待办事项的'标题'.我通过使用唯一的字段名称找到了一个解决方法,但我担心随着应用程序的增长,它会使事情变得复杂,并且更愿意使用唯一的表单名称,因此每个字段都可以具有相同的名称而不会干扰其他表单

(TodoForm1,TodoForm2,TodoForm3都可以有一个独特的'标题'字段,而不是包含'title1','title2','title3'字段的TodoForm.

我尝试访问TodoForm的道具,所以我可以将每个表单的键设置为组件的唯一ID,但似乎组件不会早期接收道具.

我也尝试制作一个立即调用的函数,它会吐出一个随机数,并使用该数字作为表单的名称,但这也无效.

如何通过我的所有待办事项映射并使用唯一的表单键呈现v6 redux-form？

这是app,console和redux devtools的图片.有3个'todos',但是只有一个表单连接它们todo-926,即使每个表单键应该是在一个立即调用的函数中随机生成的:

HomePageMainSection.index.js

renderTodos(todo) {
    if (!todo) {
      return <div>No Todos</div>;
    }
    return (
      <div key={todo.get('id')}>
        <Todo
          todo={todo}
          updateTodo={this.props.updateTodo}
          deleteTodo={this.props.deleteTodo}
        />
      </div>
    );
  }

  render() {
    if (!this.props.todos) {
      return <div>No Todos</div>;
    }

    return (
      <div className={styles.homePageMainSection}>
        <h1>Hey I'm the Main Section</h1>
        <div>
          {this.props.todos.get('todos').map(this.renderTodos)}
        </div>
      </div>
    );
  }

Todo.index.js:

  renderTodo() {
    if (this.state.editMode) {
      return (
        <TodoForm
          todo={this.props.todo} changeTodoEditMode={this.changeTodoEditMode}
          updateTodo={this.props.updateTodo}
        />
      );
    }

    return (
      <div className={styles.Todo} onClick={this.changeTodoEditMode}>
        <div className="card card-block">
          <h4 …