还原式未提交

Question

我的应用程序中有一个奇怪的错误。我想让用户通过redux形式更新组的名称。将旧名称与输入字段交换没有问题，但是当我点击提交时，则什么都不会发生。这对我来说很奇怪，因为我使用相同的表单来创建组，并且在那里工作完全正常。

import React, { Component } from 'react'; 
import { connect} from 'react-redux'; 
import { deleteAccessGroup, editAccessGroup } from '../actions/UserActions'; 
import { showModal } from '../actions/ModalActions'; 
import * as types from '../actions/index'; 
import AccessGroupCreation from '../components/AccessGroupCreation'; 

class AccessGroupElement extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     toggle: false 
    } 
    } 

    handleSubmit = values => { 
    this.props.editAccessGroup(values); 
    console.log(this.state, "Das sind die values: ", values); 
    this.edit; 
    console.log(this.state); 
    } 

    edit =() => this.setState({toggle: !this.state.toggle}); 

    delAccessGroup =() => this.props.deleteAccessGroup(this.props.accessGroup.id); 

    showPicModal =() => { 
    let id = this.props.accessGroup.id; 

    this.props.showModal(types.MODAL_TYPE_PICUPLOAD, { 
     title: 'Please upload a Profile Picture', 
     onConfirm: (pic) => { 
     console.log(this.props.accessGroup.id); 
     console.log(pic) 
     } 
    }); 
    } 

    render() { 
    const accessGroup=this.props.accessGroup; 

    return(
     <div className="row" id="hoverDiv"> 
     <div className="col-lg-1"></div> 
     {this.state.toggle ? 
     <div className="col-lg-9"> 
      <AccessGroupCreation onSubmit={this.handleSubmit} /> 
     </div> : 
     <div className="col-lg-9">{accessGroup.name}</div>} 
     <div className="col-lg-2"> 
      <button type="button" onClick={this.delAccessGroup} 
        className="btn btn-default btn-sm pull-right"> 
      <span className="glyphicon glyphicon-trash"></span> 
      </button> 

      <button type="button" onClick={this.edit} 
        className="btn btn-default btn-sm pull-right"> 
      <span className="glyphicon glyphicon-pencil"></span> 
      </button> 
     </div> 
     </div> 
    ); 
    } 
} 

export default connect(null, { deleteAccessGroup, editAccessGroup, showModal })(AccessGroupElement); 

这里是表单组件：

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

const required = value => value ? undefined : 'Required'; 

const lengthFunction = (min, max) => value => 
    value && (value.length > max || value.length < min) ? `Must be between ${min} and ${max} characters` : undefined 

const length = lengthFunction(5, 20); 

const renderField = ({ input, label, type, meta: { touched, error } }) => (
    <div> 
    <input {...input} placeholder={label} type={type} className="form-control"/> 
     {touched && (error && <span>{error}</span>)} 
    </div> 
); 

const AccessGroupCreation = (props) => { 
    const { handleSubmit, pristine, submitting } = props; 

    return (
    <form className="form-inline" onSubmit={handleSubmit}> 
     <div className="input-group"> 
     <Field name="name" type="text" 
      component={renderField} label="Add an Access Group" 
      validate={[ required, length]}/> 

      <span className="input-group-btn"> 
       <button className="btn btn-success" disabled={pristine || submitting} 
         value="this.state.value" type="submit"> 
       <span className="glyphicon glyphicon-send"></span> 
        Submit 
       </button> 
      </span> 
     </div> 
    </form> 
) 
} 

export default reduxForm({ 
    form: 'AccessGroupCreationForm' // a unique identifier for this form 
})(AccessGroupCreation) 

帮助，一如既往，将是非常赞赏。

Answer 1

问题是这样的代码：

handleSubmit = values => { 
    this.props.editAccessGroup(values); 
    console.log(this.state, "Das sind die values: ", values); 

    this.edit; // call this function this.edit(); 

    console.log(this.state); 
} 

Answer 2

的问题是，你的editAccessGroup功能是不依赖于你的店。目前，它正在创建并返回一个动作，但该动作未被分派。

我通常会实现它是使用react-redux的connect功能和使用mapDispatchToProps到actionCreator您的商店的dispatch功能结合的方式。

Answer 3

更改一些东西原样

 ... 

class AccessGroupElement extends Component { 
    constructor(props) { 
     ... 
    } 

    submit = values => { // rename this function 
    this.props.editAccessGroup(values); 
    console.log(this.state, "Das sind die values: ", values); 
    this.edit; 
    console.log(this.state); 
    } 

    .... 

    render() { 
    const accessGroup=this.props.accessGroup; 

    return(
     <div className="row" id="hoverDiv"> 
      ........ 
     <div className="col-lg-9"> 
      <AccessGroupCreation submit={this.submit} /> // change here 
     </div> : 
      ......... 
     </div> 
    ); 
    } 
} 

export default connect(null, { deleteAccessGroup, editAccessGroup, showModal })(AccessGroupElement); 

然后在您的形式 -

const AccessGroupCreation = (props) => { 
    const { handleSubmit, pristine, submitting, submit } = props; // getting submit function 

    return (
    <form className="form-inline" onSubmit={handleSubmit(submit)}> 
     ....... 
    </form> 
) 
} 

export default reduxForm({ 
    form: 'AccessGroupCreationForm' // a unique identifier for this form 
})(AccessGroupCreation) 

Answer 4

好了，问题是使用反应可折叠的。看起来像事件处理程序“冲突”，当有内部重叠形式/更换可折叠。我改变了代码，现在它的工作原理：

<div className="row" id="hoverDiv" key={ accessGroup.id }> 
     <div className="col-lg-1"/> 
      { 
      this.state.toggle ? 
       <div className="col-lg-9"> 
       <AccessGroupEdit onSubmit={this.handleSubmit} /> 
       </div> : 
       <div className="col-lg-9"> 
       <Collapsible trigger={accessGroup.name}> 
        <small><i>Apps:</i></small> 
        <ul className="list-inline"> 
         {accessGroup.apps.map(group => { 
         return <li key={group.id}><img width="75px" 
                 height="50px" 
                 src={group.image} 
                 alt={group.name} /> 
           </li>})} 
        </ul> 
        <hr /> 
        <small><i>Permissions:</i></small> 
        <ul className="list-inline"> 
         {Object.keys(accessGroup.permissions).map(permission => { 
         return accessGroup.permissions[permission] ? 
         <li key={permission}> 
          <span className="label label-primary">{permission}</span> 
         </li> : "" 
         })} 
        </ul> 
       </Collapsible> 
       </div> 
      } 
     <div className="col-lg-2"> 
      <button type="button" onClick={this.delAccessGroup} 
        className="btn btn-default btn-sm pull-right"> 
      <span className="glyphicon glyphicon-trash"></span> 
      </button> 

      <button type="button" onClick={this.edit} 
        className="btn btn-default btn-sm pull-right"> 
      <span className="glyphicon glyphicon-pencil"></span> 
      </button> 
     </div> 
     </div>