javascript - Add class on focus change using Redux and React - Stack Overflow

admin管理员组

文章数量:1347141

I'm trying to add a class to a div wrapping an input on focus with Redux and React.

My React ponent looks like this:

import React from 'react'

const Input = ({ value, onChange }) => (
  <div className="">
    <input type="email" onChange={onChange} value={value} />
  </div>
)

export default Input

When a user focuses on the input, I want the class selected to be added to the div. The ponent is connected using react-redux.

The two ways I've tried so far:

Attempt 1

Add an onFocus listener to the input and dispatch an action that adds the inputs focus state into the inputs state , for example:

{
  value: '',
  focused: true
}

If focused is true, add the class with className={focused ? 'selected' : ''}

My concern with this approach is I could get into issues where multiple inputs have focused: true. So I'd have to manage that myself and look through the whole input state and reset to false before setting focus on a new input.

Atempt 2

Add an onFocus listener to the input and dispatch an action that contains the ID of the focused input and store the ID in the state. This would solve the issue of having to reset all other inputs to false.

My concern with this is I'd have to give every input I wanted this feature on a unique ID (this could possibly use Reacts ID). I'd have to add something like className={ID === focusedID ? 'selected' : '')

---

I feel like there must be a better way to achieve this. Any help would be appreciated.

Thanks

I'm trying to add a class to a div wrapping an input on focus with Redux and React.

My React ponent looks like this:

import React from 'react'

const Input = ({ value, onChange }) => (
  <div className="">
    <input type="email" onChange={onChange} value={value} />
  </div>
)

export default Input

When a user focuses on the input, I want the class selected to be added to the div. The ponent is connected using react-redux.

The two ways I've tried so far:

Attempt 1

Add an onFocus listener to the input and dispatch an action that adds the inputs focus state into the inputs state , for example:

{
  value: '',
  focused: true
}

If focused is true, add the class with className={focused ? 'selected' : ''}

My concern with this approach is I could get into issues where multiple inputs have focused: true. So I'd have to manage that myself and look through the whole input state and reset to false before setting focus on a new input.

Atempt 2

Add an onFocus listener to the input and dispatch an action that contains the ID of the focused input and store the ID in the state. This would solve the issue of having to reset all other inputs to false.

My concern with this is I'd have to give every input I wanted this feature on a unique ID (this could possibly use Reacts ID). I'd have to add something like className={ID === focusedID ? 'selected' : '')

---

I feel like there must be a better way to achieve this. Any help would be appreciated.

Thanks

• javascript
• reactjs
• redux

Share Improve this question Follow asked May 12, 2016 at 10:11 jmahonyjmahony 16611 gold badge33 silver badges1414 bronze badges 4

• 1 If it is only a presentational thing, I think that its a much better solutions to use CSS: w3schools./cssref/sel_focus.asp – dlopez Commented May 12, 2016 at 10:14
• It is only presentational, I can't use CSS for this because CSS can't select an elements parent. I need to add a class to the containing div when the input is selected. Thank you for your reply though :) – jmahony Commented May 12, 2016 at 10:19
• 1 Then I think that the better approach is to treat the whole code as a one ponent, and handle the states in local. Play with onBlur and with onFocus. Take a look to the @QoP answer :) – dlopez Commented May 12, 2016 at 10:26
• @QoP solution worked, thank you. – jmahony Commented May 12, 2016 at 10:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You dont even need Redux for that, just store the "selected" state in the ponent.

Something like this

var InputComp = React.createClass({
  getInitialState: function() {
   return {focus: false}
  },
  onFocus : function(){
        this.setState({focus: true})
  },
  onBlur: function(){
      this.setState({focus: false})
  },
  getClass: function(){
      if(this.state.focus === true)
        return "selected";
      else
        return "";
  },
  render: function() {
    var inputClass = this.getClass();
    return <div className={inputClass}><input onBlur={this.onBlur} onFocus={this.onFocus}/></div>
  }
});

ReactDOM.render(
  <InputComp/>,
  document.getElementById('container')
);

jsfiddle

You need to use the :focus pseudo-selector. You need to add a class to your divs, for instance, focusable. If that is done, you need this CSS rule:

.focusable:focus {
    /* Your rules for selected */
}

本文标签： javascriptAdd class on focus change using Redux and ReactStack Overflow