score:-1

follow this article! and you will get better understanding of how to setstate.

i prefer to use the fat arrow function. try this out!

import react, { component } from 'react';
import styled from 'styled-components';

const btnbox = styled.ul`
display:flex;
width:50vw;
align-items:center;
justify-content:flex-start;
font-weight:900;
font-size:5vw;
letter-spacing:-0.5vw;
`;
const mybtn = styled.li`
width:30%;
font-size:5vw;
display:flex;
align-items:center;
justify-content:flex-start;
cursor:pointer;
`;

class signandlog extends component {
  constructor(props) {
    super(props);
    this.state = { scolor: 'black', lcolor: 'grey' };
    localstorage.setitem(' ', this.state.scolor);
  }


  choosefun =(e)=> {
    const myname = e.target.dataset.name;
    if (myname === 'sign') {
      this.setstate({
        scolor: 'black',
        lcolor: 'grey'
      });
      localstorage.setitem('status', myname);
    } else {
      this.setstate({
        scolor: 'grey',
        lcolor: 'black'
      });
      localstorage.setitem('status', myname);
    }
  }

  render() {
    return (
      <btnbox>
        <mybtn onclick={(e)=>this.choosefun(e)} data-name="sign" style={{ color: this.state.scolor }}>註冊</mybtn>
        <mybtn onclick={(e)=>this.choosefun(e)} data-name="log" style={{ color: this.state.lcolor }}>登入</mybtn>
      </btnbox>
    );
  }
}


export default signandlog;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


Related Query

More Query from same tag