天天看点
返回

React中的state管理

React中的state管理

实现如上的点击变色。

父组件 

class StarRating extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      starsSelected: props.starsSelected
    }
    this.change = this.change.bind(this)
  }

  change(starsSelected) {
    this.setState({starsSelected})
  }

  render() {
    const {totalStars} = this.props;
    const {starsSelected} = this.state;
    return(
      <div className="star-rating">
        {
          [...Array(totalStars)].map((n,i) => 
            <Star key={i} selected={i<starsSelected} onClick={() => this.change(i+1)}/>
          
          )
        }
        <p>{starsSelected} of {totalStars}</p>
      </div>
    )
  }
}

StarRating.propTypes = {
  totalStars: PropTypes.number
}

StarRating.defaultProps = {
  totalStars: 5
}

上述为ES6 类创建组件

第二种 createClass创建组件(React15) 

const StarRating = createClass({
  display: "StarRating",
  propTypes: {
    totalStars: propTypes.number
  },
  getDefaultProps() {
    return {
      totalStars: 5
    }
  },
  getInitialState() {
    return {
      starsSelected: 0
    }
  },
  change(starsSelected) {
    this.setState({starsSelected})
  },
  render() {
    const {totalStars} = this.props;
    const {starsSelected} = this.state;
    return(
      <div className="state-rating">
        {
          [...Array(totalStars).map((n,i) => {
            <Star key={i} selected={i<starsSelected} onClick={() => this.change(i+1)}/>
          }
          )]
        }
        <p>{starsSelected} of {totalStars}</p>
      </div>
    )
  }
})

每个五角星的子组件 

const Star = ({selected=false,onClick=f=>f}) => 
  <div className={ selected ? 'star selected' : 'star'} onClick = {onClick}></div>

  Star.propTypes = {
    selected: PropTypes.bool,
    onClick: PropTypes.func
  }

上述为无状态函数组件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
<style>
  .star{
    cursor: pointer;
    height: 25px;
    width: 25px;
    margin: 2px;
    float: left;
    background-color: grey;
    clip-path: polygon(
      50% 0%,
      63% 38%,
      100% 38%,
      69% 59%,
      82% 100%,
      50% 75%,
      18% 100%,
      31% 59%,
      0% 38%,
      37% 38%
    )
  }
  .star.selected{
    background-color: red;
  }
  p{
    float:left;
    margin-left: 20px;
    margin-top: 4px;
  }
</style>
</head>




<body>
<div id="example"></div>
<script type="text/babel">
const Star = ({selected=false,onClick=f=>f}) => 
  <div className={ selected ? 'star selected' : 'star'} onClick = {onClick}></div>

  Star.propTypes = {
    selected: PropTypes.bool,
    onClick: PropTypes.func
  }

// const StarRating = createClass({
//   display: "StarRating",
//   propTypes: {
//     totalStars: propTypes.number
//   },
//   getDefaultProps() {
//     return {
//       totalStars: 5
//     }
//   },
//   getInitialState() {
//     return {
//       starsSelected: 0
//     }
//   },
//   change(starsSelected) {
//     this.setState({starsSelected})
//   },
//   render() {
//     const {totalStars} = this.props;
//     const {starsSelected} = this.state;
//     return(
//       <div className="state-rating">
//         {
//           [...Array(totalStars).map((n,i) => {
//             <Star key={i} selected={i<starsSelected} onClick={() => this.change(i+1)}/>
//           }
//           )]
//         }
//         <p>{starsSelected} of {totalStars}</p>
//       </div>
//     )
//   }
// })


class StarRating extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      starsSelected: props.starsSelected
    }
    this.change = this.change.bind(this)
  }

  change(starsSelected) {
    this.setState({starsSelected})
  }

  render() {
    const {totalStars} = this.props;
    const {starsSelected} = this.state;
    return(
      <div className="star-rating">
        {
          [...Array(totalStars)].map((n,i) => 
            <Star key={i} selected={i<starsSelected} onClick={() => this.change(i+1)}/>
          
          )
        }
        <p>{starsSelected} of {totalStars}</p>
      </div>
    )
  }
}

StarRating.propTypes = {
  totalStars: PropTypes.number
}

StarRating.defaultProps = {
  totalStars: 5
}

ReactDOM.render(<StarRating totalStars={7} starsSelected={3}/>,document.getElementById("example"))
</script>

</body>
</html>
react
上一篇: 讲讲React中的State和Props
下一篇: react-state的问题

继续阅读