Управление представлением данных для редукционной формы

Question

У меня есть редукционная форма, подробная информация ниже. Согласно документам, я должен иметь возможность передать функцию handleSubmit и вызвать вызов, но это не похоже.

Я хотел бы предотвратитьDefault, а затем передать данные формы в действие из другой части сайта (еще не реализовал это ниже). Однако я даже не могу получить консольный журнал «FIRED» для регистрации с использованием этого подхода. Что мне не хватает? И как можно получить данные в этом сценарии? Я обычно связываются с ним в вызове функции, но я даже не могу получить, чтобы работать ...

import React, {Component, PropTypes} from 'react'; 
import {connect} from 'react-redux' 
import {bindActionCreators} from 'redux' 
import {reduxForm} from 'redux-form' 
import FlatButton from 'material-ui/lib/flat-button' 
import TextField from 'material-ui/lib/text-field' 
import Checkbox from 'material-ui/lib/checkbox'; 
import orgValidation from './orgValidation' 

@reduxForm({ 
    form: 'organization', 
    fields: ['longName', 'acronym', 'ieee', 'active'], 
    validate: orgValidation, 
}) 
export default class OrganizationForm extends Component { 
    static propTypes = { 
    fields: PropTypes.object.isRequired, 
    handleSubmit: PropTypes.func.isRequired 
    }; 

    handleSubmit = (e) => { //***THIS NEVER GETS CALLED *** 
    console.log('FIRED') 
    console.log(e) 
    console.log(this) 
    e.preventDefault() 

    console.log(data) 
    }; 

    render() { 
    let btnText 
    if (this.props.params.orgId) { 
     btnText = 'Update' 
    }else{ 
     btnText = 'Create' 
    } 
    const { 
     fields: {longName, acronym, ieee, active}, handleSubmit} = this.props; 

    return (
     <form onSubmit={handleSubmit(this.handleSubmit)}> 
     <center><h3 style={{fontSize: '24px', fontWeight: '400'}}>{btnText} Organization</h3></center> 
     <div> 
      <TextField 
      floatingLabelText="Organization full name" 
      type="text" 
      fullWidth={true} 
      autoFocus 
      errorText={longName.error} 
      {...longName} 
      /> 
      <TextField 
      floatingLabelText="Organization acronym" 
      type="text" 
      fullWidth={true} 
      errorText={acronym.error} 
      {...acronym} 
      /> 
     <div className="row" style={{marginTop: '15px'}}> 
      <div className="cute-6-tablet"> 
      <Checkbox 
      label="IEEE Sponsored" 
      labelStyle={{color: "gray"}} 
      defaultChecked={true} 
      checked={ieee.value} 
      onCheck={(e, checked) => ieee.onChange(checked)} 
      /> 
     </div> 
     <div className="cute-6-tablet"> 
      <Checkbox 
      label="Active" 
      labelStyle={{color: "gray"}} 
      defaultChecked={true} 
      checked={active.value} 
      onCheck={(e, checked) => active.onChange(checked)} 
      /> 
     </div> 
     </div> 
     <div style={{float: 'right'}}> 
      <FlatButton 
      label="Cancel" 
      secondary={true} 
      /> 
      <FlatButton 
      type="submit" 
      label={btnText} 
      primary={true} 
      /> 
     </div> 
     </div> 
     </form> 
    ); 
    } 
} 

Answer 1

Try и написать это:

<form onSubmit={this.handleSubmit}> 

Это правильный способ передать ссылку функции на форму поддержки onSubmit. Он должен автоматически привязываться к полям и их значениям.

В качестве дополнительного примечания, поскольку вы используете форму редукса, все будет храниться в глобальном состоянии. Поскольку ваша форма монтируется в «организации», вы можете mapStateToProps и иметь значения формы в любом другом компоненте.

function mapStateToProps(state) { 
    return { 
     organizationValues: state.form.organization 
    } 
} 

Это также подразумевает, что вы использовали соединение.

Answer 2

По дизайну redux-form не передает event на ваш заказ submit.

From the submit validation example:

const submit = (values, dispatch) => { 
    // This would normally be passed as a Component prop from the parent Container 
} 

class SubmitValidationForm extends Component { 
    render() { 
    const { fields: { username, password }, error, resetForm, handleSubmit, submitting } = this.props 
    return (<form onSubmit={handleSubmit(submit)}> ... </form>); 
    } 
} 

Вместо этого, функция пользовательских submit вы передаете handleSubmit (внутри формы-х onSubmit обработчик) принимает новую форму значения , если они действительные.

Более чем вероятно, что ваш валидатор не принимает представленные значения,, и поэтому ваша пользовательская функция отправки не вызывается.

Вы должны увидеть на своей консоли действие @redux-form/SUBMIT_FAILED, которое вы можете проверить для проверки информации.