ReactJs changing css property onclick

Question

I made a variable that has the style which I would want the input box to change to when it is clicked on. How can I implement it so that when the input box is clicked, the border color of the input box changes to blue, considering that CSS, styles and everything else are imported?

    const inputStyle = css
      border-color: blue;
    ;      

    const InputBox = styled.input
      myClick: function () {
      inputstyle
      }
   ;

    render() {
    return (
        <InputBox
          placeholder='Click Me'
          type='text'
          onClick={this.myClick}
        />

user5774952 · Accepted Answer · 2018-07-23 02:45:57Z

styled.foo doesn't return a class component, so writing methods as if they're on a class in the template string won't work.

Since you're handling something stateful (was this thing clicked?) you need to have some place to put that state. Then you can pass that state to the InputBox component:

const InputBox = styled.input`
  border-color: ${({ clicked }) => clicked ? 'blue' : 'transparent'};
`

class Parent extends React.Component {
  constructor (props) {
    this.state = { clicked: false }
  }
  handleClick () {
    this.setState({ clicked: true })
  }
  render () {
    return (
      <InputBox
        placeholder="Click Me"
        type="text"
        clicked={this.state.clicked}
        onClick={this.handleClick}
      />
    )
  }
}

I'd suggest checking out the "Passed Props" section of the styled-components docs.

Nima habibkhoda · Accepted Answer · 2018-07-23 06:54:24Z

1

you can do this :

const Styles = {
inputNormal:{color:'blue'},
inputClicked:{color:'red'}
}
class Parent extends React.Component {
constructor (props) {
this.state = { clicked: false }
}
handleClick () {
this.setState({ clicked: true })
}

render () {
  return (
    <InputBox
      placeholder="Click Me"
      type="text"
      style={this.state.clicked?styles.inputNormal:styles.inputClicked}
      onClick={this.handleClick}
    />
  )}}

answered Jul 23, 2018 at 6:54

Nima habibkhoda

2533 silver badges13 bronze badges

Comments

Sergey · Accepted Answer · 2019-07-05 13:33:36Z

0

You should add styles with variables like this:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      clicked: false
    };
  }

  myClick = () => {
    this.setState({
      clicked: true
    });
  };

  render() {
    const inputStyle = {
      borderColor: "blue"
    };

    return (
      <input
        placeholder="Click Me"
        type="text"
        onClick={this.myClick}
        style={this.state.clicked ? inputStyle : null}
      />
    );
  }
}

Here is a working demo:

DEMO

answered Jul 5, 2019 at 13:33

Sergey

1,0754 gold badges15 silver badges33 bronze badges

Collectives™ on Stack Overflow

ReactJs changing css property onclick

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related