Created
October 20, 2018 20:06
-
-
Save valex/0a5ebac1a4a6940953c30f6e8365befb to your computer and use it in GitHub Desktop.
Change props outside component (getDerivedStateFromProps)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>State</title> | |
| <style> | |
| body, textarea { | |
| font-family: Courier; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <!-- my app renders here --> | |
| </div> | |
| <script charset="utf-8" crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> | |
| <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> | |
| <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> | |
| <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.min.js"></script> | |
| <script type="text/babel"> | |
| class TextAreaCounter extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| text: props.defaultValue | |
| }; | |
| this._textChange = this._textChange.bind(this); | |
| } | |
| static defaultProps = { | |
| defaultValue: 'default text' | |
| }; | |
| _textChange(event) { | |
| this.setState({ | |
| text: event.target.value, | |
| }); | |
| }; | |
| render() { | |
| return ( | |
| <div> | |
| <textarea onChange={this._textChange} value={this.state.text}></textarea> | |
| <h3>{this.state.text.length}</h3> | |
| </div> | |
| ); | |
| }; | |
| static getDerivedStateFromProps(props, state) { | |
| console.log('derived', props,state); | |
| if (props.defaultValue !== state.text) { | |
| return { | |
| text: props.defaultValue, | |
| }; | |
| } | |
| // Return null to indicate no change to state. | |
| return null; | |
| } | |
| } | |
| TextAreaCounter.propTypes = { | |
| defaultValue: PropTypes.string | |
| }; | |
| var myTextAreaCounter = ReactDOM.render( | |
| React.createElement(TextAreaCounter, { | |
| defaultValue: "Bob", | |
| }), | |
| document.getElementById("app") | |
| ); | |
| myTextAreaCounter = ReactDOM.render( | |
| React.createElement(TextAreaCounter, { | |
| defaultValue: "another", | |
| }), | |
| document.getElementById("app") | |
| ); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment