标签: redux-form

我正在使用Redux-Form，并且试图在用户单击提交时获取表单值。

这些是外形道具。如您所见，有提交功能：

• 提交时
• 提交成功
• 提交失败

onSubmitSucess并且onSubmitFail永远不会被调用。onSubmit被调用但没有参数。

我想要的只是获取表单值，以便我可以将它们发布到 API。

我怎样才能做到这一点？

编辑（代码）

AutoFormInternal.js

class AutoFormInternal extends Component {

    render() {

        let {
            componentFactory,
            fields,
            fieldMetadata,
            layout,
            handleSubmit,
            submitting
        } = this.props;

        let model = this.props.values;
        let fieldMetadataEvaluated = metadataEvaluator.evaluate(fieldMetadata, model, '', fields);

        let groupComponent = componentFactory.buildGroupComponent({
            component: layout.component,
            layout: layout,
            fields: fieldMetadataEvaluated,
            componentFactory: componentFactory
        });

        return (
            <div className="meta-form">
                <form onSubmit={handleSubmit}>
                    { groupComponent }
                    <ButtonToolbar>
                        <Button type="submit" bsStyle="primary" disabled={submitting}>Submit</Button>
                        <Button disabled={submitting}>Cancel</Button>
                    </ButtonToolbar> …

我需要创建一个带有验证的选项卡式多步表单,其中一个选项卡的数据需要转发到下一个选项卡.用户应该能够返回并编辑上一个选项卡中的表单.如何使用reduxForms或任何其他方法创建表单？

我正在使用 redux-form 但是当我开始输入时，焦点第一次在反应中消失。

在我下面的组件中，输入字段在输入字符后失去焦点。在使用 Chrome 的 Inspector 时，看起来整个表单都在重新呈现，而不仅仅是输入字段的 value 属性。

请看下面的代码：

<Field
        name='description'
       // onChange={this.handleChange.bind(this)}
        //value={this.state.description}
        component={props => {
          return (
            <MentionTextArea  {...props} userTags={userTags} tags={postTags}/> 
          )
        }}

提及TextArea 组件：

import React, {Component, PropTypes} from 'react'
import { MentionsInput, Mention } from 'react-mentions'
import defaultStyle from './defaultStyle'

class MentionTextArea extends Component {
    constructor(props) {
        super(prop)
    }
    handleOnChange (e) {
        this.props.input.onChange(e.target.value); 
    }
    render() {
       // const { input, meta, ...rest } = this.props;
        return (
            <MentionsInput 
                value={this.props.input.value || ''}
                onChange={this.handleOnChange.bind(this)}
                singleLine={false}
                style={ …

初学者在这里。我有一个使用地理定位 API 获取纬度和经度的按钮。我在我的控制台上得到了很好的位置，但是我在输入框中显示它们时遇到了问题（以便我可以稍后发布位置信息）。下面是我的组件代码：

export class GetLocation extends Component{
constructor(){
    super();
    this.state = {
        latitude: '',
        longitude: ''
    };
    this.getMyLocation = this.getMyLocation.bind(this);

}

ComponentDidMount(){
    this.getMyLocation();
}
getMyLocation = (e) => {
let location = null;
let latitude = null;
let longitude = null;
if (window.navigator && window.navigator.geolocation) {
    location = window.navigator.geolocation
}
if (location){
    location.getCurrentPosition(function (position) {
        latitude = position.coords.latitude;
        longitude= position.coords.longitude;
        console.log(latitude);
        console.log(longitude);
    })
}
    this.setState({latitude: latitude, longitude: longitude})

}

render(){
    return(
    <div>
        <p>Your location is </p>
        <Field name="latitude" component="input" …

我是 React/Redux 新手，刚刚开始使用 chai 测试我的第一个应用程序。我正在使用redux-form/immutable和react-router，并且我不确定在测试时如何解决这个问题：

  1) Login
       renders a login form:
     Invariant Violation: Could not find "store" in either the context or props of "Connect(Form(LoginForm))". Either wrap the root component in a <Provider>, or explicitly pass "st
ore" as a prop to "Connect(Form(LoginForm))".

我发现这个问题：https://github.com/reactjs/react-redux/issues/57这似乎是同样的问题，但添加将子项返回到 Router 元素的函数的解决方案并不能解决问题。

索引.jsx

import {configRoutes} from './config'

ReactDOM.render(
  <Provider store={store}>
    <Router history={hashHistory}>{configRoutes()}</Router>
  </Provider>,
  document.getElementById('app')
);

配置文件

import App from './App';
import {PackageStoreContainer} from './components/Package/PackageContainer';
import {LoginStoreContainer} from './components/Login/LoginContainer';

export function configRoutes() {
  const routes …

使用redux-form,我尝试使用i18n进行字段级验证.我正在使用react-intl(https://github.com/yahoo/react-intl),所以我尝试了这个:

<Field name="Label" component={renderField} validate={[required(this.props.intl)]}

具有验证功能:

const required = (intl) => (value) => {return value ? undefined : intl.formatMessage({id:"Required"})};

问题:当我的字段标签出现错误时,如果我更改语言,我的字段状态将丢失,我的错误消息将消失.

我认为验证道具的价值不应该在渲染之间改变,因为它会导致字段重新注册.解决办法是什么 ？

如何在Field-Level Validation中正确地将react-intl集成到验证消息中？可能吗 ？

提交表单后如何重定向到另一个页面？添加我的代码需要什么代码？这是我的代码 simple.js

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


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 Name"
            required
          />
        </div>
      </div>
      <div>
        <label>Last Name</label>
        <div>
          <Field
            name="lastName"
            component="input"
            type="text"
            placeholder="Last Name"
             required
          />
        </div>
      </div>
      <div>
        <label>Email</label>
        <div>
          <Field
            name="email"
            component="input"
            type="email"
            placeholder="Email"
             required
          />
        </div>
      </div>
      <div>
        <label>Sex</label>
        <div>
          <label>
            <Field name="sex" component="input" type="radio" …

我的表单页面中有一个取消按钮，我添加了

onClick={() => this.props.resetForm()}

来清除表格，但我得到TypeError: resetForm is not a function

你能告诉我为什么在反应中点击按钮时页面刷新吗？我在输入字段中输入内容并按下按钮，我的页面正在刷新我想获取表单字段的值 https://codesandbox.io/s/green-frost-414qi

class ContactForm extends React.Component {
  handleSubmit = values => {
    // print the form values to the console
    console.log(values);
  };
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <label htmlFor="firstName">First Name</label>
          <Field name="firstName" component="input" type="text" />
        </div>

        <button type="submit">Submit</button>
      </form>
    );
  }
}
const ContactRForm = reduxForm({
  // a unique name for the form
  form: "contact"
})(ContactForm);

export default ContactRForm;

我正在尝试将我的离子反应应用程序中的返回按钮更改为下一步/完成按钮。我将它用于 redux 表单，我完全不知道这是否是我应该在 React 代码中执行的操作，或者是否是在 Xcode 中构建的 swift 代码中执行的操作。

如果有人可以引导我到正确的位置或包含该位置的链接，那就太好了。