我试图在反应JS中开发一个简单的Dialog组件。我做了一些非常相似的事情,之前效果很好:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { GridLoader as Loader } from 'halogen';
import httpCodes from 'http-status-codes';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.css';
const NO_ELEMENT_SIZE = 0;
const TRANSITION_INTERVAL = 10000;
export default class MyCarousel extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
this.componentIsMounted = true;
this.fetchMedia();
}
componentWillUnmount() {
this.componentIsMounted = false;
}
fetchMedia() {
fetch(this.props.url, {
headers: { 'Content-Type': 'application/json' },
method: 'GET'
}).
then((response) => {
if (response.status >= httpCodes.BAD_REQUEST ||
response.status === httpCodes.NO_CONTENT) {
return Promise.reject(new Error(response.statusText));
}
return response.json();
}).
then((response) => {
if (!this.componentIsMounted) {
return;
}
const media = this.getMedia(response);
this.setState({ media });
});
}
getMedia(media) {
const mediaList = [];
let key = 0;
media.forEach((mediaEntry) => {
if (mediaEntry.type === 'image;imagem') {
mediaList.push(<div key={key++}>
<img src={mediaEntry.url} />
</div>);
} else if (mediaEntry.type === 'video;vídeo') {
mediaList.push(<div key={key++}>
<iframe src={mediaEntry.url} />
</div>);
}
});
return mediaList;
}
render() {
if (!this.state.media) {
return (
<div className="hor-align vert-align">
<Loader color="#012935" className="loader"/>
</div>
);
}
if (this.state.media.length === NO_ELEMENT_SIZE) {
return null;
}
return (
<Carousel useKeyboardArrows autoPlay infiniteLoop
showArrows showThumbs={ false } showStatus={ false }
interval={TRANSITION_INTERVAL}>
{this.state.media}
</Carousel>
);
}
}
MyCarousel.propTypes = { url: PropTypes.string.isRequired };
所以,我对我的Dialog组件做了完全相同的操作,但我一直收到错误:this.setState is not a function
。为什么一个有效,另一个无效?
import React, { Component } from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import PropTypes from 'prop-types';
export default class MyDialog extends Component {
constructor(props) {
super(props);
this.state = { open: false };
}
handleOpen() {
this.setState({ open: true });
}
handleClose() {
this.setState({ open: false });
}
render() {
const actions = [
<FlatButton
label="Cancel"
primary
onTouchTap={this.handleClose}
/>,
<FlatButton
label="Submit"
primary
keyboardFocused
onTouchTap={this.handleClose}
/>
];
return (
<div>
<RaisedButton label="Dialog" onTouchTap={this.handleOpen} />
<Dialog
title="Dialog With Actions"
actions={actions}
modal={false}
open={this.state.open}
onRequestClose={this.handleClose}
>
<TextField hintText="Hint Text"
/>
</Dialog>
</div>
);
}
}
MyDialog.propTypes = {
open: PropTypes.bool.isRequired,
poiId: PropTypes.string,
url: PropTypes.string.isRequired,
user: PropTypes.any
};
最后,我称之为 MyDialog 组件的组件。
知道什么是错的吗?
亲切的问候