import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {
Grid,
Button,
FormGroup,
ControlLabel,
FormControl,
HelpBlock,
} from 'react-bootstrap';
import { CSSTransition } from 'react-transition-group';
import './anim.css';
class Example extends React.Component {
state = {
name: '',
showValidationMessage: false,
showValidationButton: false,
};
render() {
const {
name,
showValidationMessage,
showValidationButton,
} = this.state;
return (
<Grid style={{ paddingTop: '2rem' }}>
<form style={{ marginTop: '1rem' }}>
<FormGroup
validationState={
showValidationMessage ? 'success' : null
}
>
<ControlLabel>Your name</ControlLabel>
<FormControl
type="text"
value={name}
onFocus={() => {
this.setState({
showValidationMessage: false,
});
}}
onChange={event => {
this.setState({
name: event.target.value,
showValidationButton: true,
});
}}
/>
<CSSTransition
in={showValidationMessage}
timeout={300}
classNames="message"
unmountOnExit
onExited={() => {
this.setState({
showValidationButton: true,
});
}}
>
{state => (
<HelpBlock>
Your name rocks!
<CSSTransition
in={state === 'entered'}
timeout={300}
classNames="star"
unmountOnExit
>
<div className="star">⭐</div>
</CSSTransition>
</HelpBlock>
)}
</CSSTransition>
</FormGroup>
</form>
{showValidationButton ? (
<Button
onClick={() => {
this.setState(state => ({
showValidationButton: false,
showValidationMessage: true,
}));
}}
>
Validate form
</Button>
) : null}
</Grid>
);
}
}
ReactDOM.render(<Example />, document.getElementById('root'));
registerServiceWorker();
上面这段代码能够正常运行，但是把它作为一个单独的组件（下面这段代码）使用就报
Uncaught Error: Unable to find node on an unmounted component.
import React from 'react';
import ReactDOM from 'react-dom';
import {
Grid,
Button,
FormGroup,
ControlLabel,
FormControl,
HelpBlock,
} from 'react-bootstrap';
import { CSSTransition } from 'react-transition-group';
import './动画.css';
class Anim extends React.Component {
state = {
name: '',
showValidationMessage: false,
showValidationButton: false,
};
render() {
const {
name,
showValidationMessage,
showValidationButton,
} = this.state;
return (
<Grid style={{ paddingTop: '2rem' }}>
<form style={{ marginTop: '1rem' }}>
<FormGroup
validationState={
showValidationMessage ? 'success' : null
}
>
<ControlLabel>Your name</ControlLabel>
<FormControl
type="text"
value={name}
onFocus={() => {
this.setState({
showValidationMessage: false,
});
}}
onChange={event => {
this.setState({
name: event.target.value,
showValidationButton: true,
});
}}
/>
<CSSTransition
in={showValidationMessage}
timeout={300}
classNames="message"
unmountOnExit
onExited={() => {
this.setState({
showValidationButton: true,
});
}}
>
{state => (
<HelpBlock>
Your name rocks!
<CSSTransition
in={state === 'entered'}
timeout={300}
classNames="star"
unmountOnExit
>
<div className="star">⭐</div>
</CSSTransition>
</HelpBlock>
)}
</CSSTransition>
</FormGroup>
</form>
{showValidationButton ? (
<Button
onClick={() => {
this.setState(state => ({
showValidationButton: false,
showValidationMessage: true,
}));
}}
>
Validate form
</Button>
) : null}
</Grid>
);
}
}
export default Anim;