import React from 'react';import { connect } from 'react-redux';//import AddImageModal from '../components/AddImageModal.Js';import button from 'react-bootstrap/lib/button';//import { getpostsByUserID } from 'actions'import posts from '../components/posts.Js';var Modal = require('react-modal');require('../../styles/AddImageModal.sCSS');import { save_post } from '../actions'; const customStyles = { content : { top : '50%',left : '50%',right : 'auto',bottom : 'auto',marginRight : '-50%',transform : 'translate(-50%,-50%)' }};var MyWallScreen = React.createClass({ getinitialState: function() { return { modalisOpen: false,imageUrl: "" }; },openModal: function() { this.setState({modalisOpen: true}); },afterOpenModal: function() { // references are Now sync'd and can be accessed. this.refs.subTitle.style.color = '#f00'; },closeModal: function() { this.setState({modalisOpen: false}); },setUrl: function(e,val) { if (e.keyCode === 13) { this.setState({ imageUrl: val }); } },resetimageUrl: function() { this.setState({ imageUrl: "" }); },onError: function() { this.setState({ imageUrl: "default.jpg" }); },render: function() { const { userposts,dispatch } = this.props; return ( <div> <button onClick={this.openModal}>Add Image</button> {/* The meat of the modal. */} <Modal isOpen={this.state.modalisOpen} onAfterOpen={this.afterOpenModal} onRequestClose={this.closeModal} style={customStyles} > <div classname="modalBox"> <h2 classname="modalBanner">Add an image link</h2> <input ref="urlinput" classname="modalinput" onKeyDown={e=>this.setUrl(e,this.refs.urlinput.value)}/> {this.state.imageUrl ? <img classname="modalimage" src={this.state.imageUrl} onError={this.onError()}/> :<div classname="modalimage"></div> } <div> <button classname="modalbutton" bsstyle = "success" onClick = {() => { dispatch(save_post(0,this.state.imageUrl)); this.closeModal(); this.resetimageUrl(); }}> Post </button> <button classname="modalbutton" bsstyle = "danger" onClick = {() => { this.closeModal(); this.resetimageUrl(); }}> Cancel </button> </div> </div> </Modal> <posts posts={userposts}/> </div> ); }});function mapStatetoProps(state,ownProps) { return { userposts: state.posts[0] }}MyWallScreen = connect(mapStatetoProps)(MyWallScreen);export default MyWallScreen;解决方法 代码调用this.onError而不是传递对它的引用.每次调用render都会调用this.onError().删除括号,看看是否修复了它:
<img classname="modalimage" src={this.state.imageUrl} onError={this.onError()}/> // `onError` is being called here
固定版本:
<img classname="modalimage" src={this.state.imageUrl} onError={this.onError}/> // `onError` is being passed as a reference here总结
以上是内存溢出为你收集整理的html – React中img标记中的onError全部内容,希望文章能够帮你解决html – React中img标记中的onError所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)