我的应用中有一个奇怪的错误。我想让用户通过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)
一如既往，非常感谢帮助。
答案 0 :(得分：0)
问题出在以下代码中：
%// Load an image
Orig = double(rgb2gray(imread('Lenna.png')));
%O=ROFdenoise(Orig, 12);
O=Orig; % No denoising before DCT
O=uint8(O);
figure(1), subplot(2,2,1), imshow(O), title('Before')
%// Discrete Cosine Transform
T = dct2(Orig);
%// Split between high - and low-frequency in the spectrum (*)
cutoff = round(0.5 * 226);
highT = fliplr(tril(fliplr(T), cutoff));
lowT = T - highT;
%//Do some denoising
highT = 0*highT;
subplot(2,2,2), imshow(highT), title('High T')
subplot(2,2,4), imshow(lowT), title('Low T')
%// Combine back
denoiseT = highT + lowT;
%// Transform back
denoiseO = uint8(idct2(denoiseT));
subplot(2,2,3), imshow(denoiseO), title('After')
答案 1 :(得分：0)
问题是您的editAccessGroup功能与您的商店无关。现在，它正在创建并返回一个动作，但该动作未被发送。
我通常采用的方法是使用react-redux connect功能并使用mapDispatchToProps将actionCreator绑定到您的商店dispatch功能。
答案 2 :(得分：0)
改变一些事情 -
...
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)
答案 3 :(得分：0)
好的，问题是使用反应可折叠。当在内部使用redux-form /替换可折叠时，似乎事件处理程序“冲突”。我改变了代码，现在它可以工作了：
<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>