reactjs - onSelect 未触发 Reactjs
问题描述
我创建了一个reactjs
组件,问题是,onSelect
没有被触发,
class TemplateController
{
default(component)
{
return (
<div id={ component.props.component_id }>
<Medias component_id="medias" trigger=".medias-trigger" modal={ true } onSelect={component.events.addAttachment} parent_type="modal" />
<div id="properties-attachments-modal" className="modal fade modal-fade-in-scale-up" role="dialog" tabIndex="-1" data-backdrop="static">
<div className="modal-dialog modal-lg modal-primary modal-simple">
<form onSubmit={ component.events.submit }>
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 className="modal-title">Attachments</h4>
</div>
<div className="modal-body mt-15">
<button className="btn btn-info medias-trigger mb-10" type="button">Add Attachments <i className="fa fa-plus"></i></button>
{
component.state.form.attachments.map((attachment, key) =>
<div key={ key }>
<i onClick={ () => component.events.removeAttachment(key) } className="fa fa-times text-danger cursor-pointer"></i> <a href={ attachment.url } target="_blank" className="text-success">{ attachment.name }</a>
</div>
)
}
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default btn-pure waves-effect waves-classic" data-dismiss="modal">Close</button>
<button className="btn btn-info waves-effect waves-classic">Save Changes</button>
</div>
</div>
</form>
</div>
</div>
</div>
);
}
}
export { TemplateController };
事件.js
class Events
{
constructor(component)
{
this.component = component;
utils.REACT.bindClassToMethods(this, ['addAttachment', 'removeAttachment', 'submit']);
}
/**
* jQuery Events Collection
*/
jQueryEvents()
{
var component = this.component;
/**
* Opens the Modal
*/
$(document).on('click', this.component.props.trigger, function()
{
// Set Default Value
component.setState(_.cloneDeep(component.defaultState));
// Fetch Details.
component.requests.getAttachments();
// Show Modal
component.el.modal.modal('show');
});
}
/**
* Select a Media
*/
addAttachment(media)
{
var form = this.component.state.form;
form.attachments.push(media);
this.component.setState({ form: form });
console.log(form, 'form')
}
/**
* Removes an Attachment
*/
removeAttachment(key)
{
var form = this.component.state.form;
form.attachments.splice(key, 1);
this.component.setState({ form: form });
}
/**
* Submits the Form
*
* @var e
*/
submit(e)
{
e.preventDefault();
this.component.requests.save();
}
}
export { Events };
' removeAttachment
', ' submit
' 被成功调用,但为什么不是 ' addAttachment
'?
解决方案
推荐阅读
- c# - 使用基类并拥有从它继承的类
- typescript - 离子科尔多瓦 iOS 忽略 targetHeight
- c - 将文件的行存储为c中的结构数组
- javafx - 禁用按钮时显示消息
- r - 如何避免使用每个元素的函数循环转换矩阵
- amazon-web-services - sam 包与 aws cloudformation 包
- python - Python循环不适用于JSON字典?
- python - 如何获得每组随时间的累积总和?
- bluetooth-lowenergy - 限制 ble 外围应用程序仅连接一个中央
- c# - 使用 Repository 模式、工作单元和 autofac 依赖注入实现 webapi