Advertisement
xapu

Untitled

Oct 23rd, 2017
364
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.18 KB | None | 0 0
  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  3.  
  4. let DemoFunc = props => {
  5. function s (props) {
  6. if (props.mood === ':|') {
  7. console.log('y')
  8. return 'Im |'
  9. }
  10. if (props.mood === ':)') {
  11. return 'Im )'
  12. }
  13. if (props.mood === ':|') {
  14. return 'Im (|)'
  15. }
  16. }
  17.  
  18. return (
  19. <div>
  20. <div> Hello {s(props.mood).bind}</div>
  21. <div> Hello {props.mood}</div>
  22. </div>
  23. )
  24. }
  25.  
  26. class Mood extends React.Component {
  27. constructor (props) {
  28. super(props)
  29. this.state = { mood: ':|' }
  30. }
  31. render () {
  32. return (
  33. <div>
  34. <span
  35. style={{
  36. fontSize: '60',
  37. border: '1px solid #333',
  38. cursor: 'pointer'
  39. }}
  40. onClick={this.changeMood.bind(this)}
  41. >
  42. {this.state.mood}
  43.  
  44. </span>
  45. <DemoFunc mood={this.state.mood} />
  46. <div>To</div>
  47. </div>
  48. )
  49. }
  50. changeMood (elem) {
  51. const moods = [':)', ':|', ':(']
  52. const current = moods.indexOf(elem.target.textContent)
  53. this.setState({ mood: current === 2 ? moods[0] : moods[current + 1] })
  54. }
  55. }
  56.  
  57. ReactDOM.render(<Mood />, root)
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement