javascript - How to dynamically add class to parent div of focused input field? - Stack Overflow

admin管理员组

文章数量:1324426

Below is my form.jsx file

var React = require('react');
var Input = require('./input');

module.exports = React.createClass({
    getInitialState: function() {
        return {
            focus: false
        }
    },
    render: function () {
        return <div className="info_input">
            <div className="demo demo2 lll">
                  <div className={"css " + (this.state.focus ? "active" : "")}>
                    <label htmlFor="d3">{this.props.firstCol}</label>
                    <Input id="d3" type="text" handleFocus={this.addClass} handleBlur={this.removeClass} />
                  </div>
            </div>
                <div className="demo demo2">
                  <div className={"css " + (this.state.focus ? "active" : "")}>
                    <label htmlFor="d3">{this.props.secondCol}</label>
                    <Input id="d3" type="text" />
                  </div>
                </div>
                <div className="clear"></div>
        </div>
    },
    addClass: function () {
            this.setState({
            focus: true
        });
    },
    removeClass: function () {
        this.setState({
            focus: false
        });
    }
});

and this is my Input ponent .jsx file

var React = require('react');

module.exports = React.createClass({
    getInitialState: function () {
        return {
            focus: false
        }
    },
    render: function() {
        return <input id={this.props.id} 
                      type={this.props.type} 
                      onFocus={this.props.handleFocus} 
                      onBlur={this.props.handleBlur} 
                      autofocus={this.state.focus} />
    }
}); 

If I focus on input field, it will add "active" className to its parent div. However, all input field will also be added "active" class.

How can I do to only add class to parent div of focused input not all of them.

Below is my form.jsx file

var React = require('react');
var Input = require('./input');

module.exports = React.createClass({
    getInitialState: function() {
        return {
            focus: false
        }
    },
    render: function () {
        return <div className="info_input">
            <div className="demo demo2 lll">
                  <div className={"css " + (this.state.focus ? "active" : "")}>
                    <label htmlFor="d3">{this.props.firstCol}</label>
                    <Input id="d3" type="text" handleFocus={this.addClass} handleBlur={this.removeClass} />
                  </div>
            </div>
                <div className="demo demo2">
                  <div className={"css " + (this.state.focus ? "active" : "")}>
                    <label htmlFor="d3">{this.props.secondCol}</label>
                    <Input id="d3" type="text" />
                  </div>
                </div>
                <div className="clear"></div>
        </div>
    },
    addClass: function () {
            this.setState({
            focus: true
        });
    },
    removeClass: function () {
        this.setState({
            focus: false
        });
    }
});

and this is my Input ponent .jsx file

var React = require('react');

module.exports = React.createClass({
    getInitialState: function () {
        return {
            focus: false
        }
    },
    render: function() {
        return <input id={this.props.id} 
                      type={this.props.type} 
                      onFocus={this.props.handleFocus} 
                      onBlur={this.props.handleBlur} 
                      autofocus={this.state.focus} />
    }
}); 

If I focus on input field, it will add "active" className to its parent div. However, all input field will also be added "active" class.

How can I do to only add class to parent div of focused input not all of them.

• javascript
• html
• css
• reactjs

Share Follow edited Dec 14, 2015 at 16:29 Giannis Tzagarakis 53066 silver badges2929 bronze badges asked Dec 14, 2015 at 14:50 DreamsDreams 8,5061111 gold badges5050 silver badges7373 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Since you have some simple logic (adding classes when focusing), it is a good idea to wrap this into a ponent and wrap this logic into it.

So, I've made a simple example:

https://jsfiddle/hLuv0c65/1/

It basically creates an Input ponent and adds input--focused to the parent div if the input is focused:

var Input = React.createClass({
    getInitialState: function() {
      return {
        isFocused: false
      };
    },

    onFocus: function() {
      this.setState({
        isFocused: true
      });
    },

    onBlur: function() {
      this.setState({
        isFocused: false
      });
    },

    render: function() {
      var classes = [];

      if(this.state.isFocused) {
        classes.push('input--focused');
      }

      return (
        <div className={classes.join(' ')}>
          <input
            type="text"
            onFocus={this.onFocus}
            onBlur={this.onBlur} />
        </div>
      );
    }
});

Hope it helps!

One solution could be passing the id value to the addClass function and using this Id along with the focus check to determine if the class should change.

module.exports = React.createClass({
getInitialState: function () {
    return {
        focus: false
    }
},
render: function() {
    return <input id={this.props.id} 
                  type={this.props.type} 
                  onFocus={this.props.handleFocus.bind( null, this.props.id} 
                  onBlur={this.props.handleBlur} 
                  autofocus={this.state.focus} />
}
}); 

Another solution would be to separate your ponents.

module.exports = React.createClass({

 addClass: function () {
        this.setState({
        focus: true
    });
 }
 getInitialState: function () {
    return {
        focus: false
    }
 },
 render: function() {
    return (
       <div className={"css " + (this.state.focus ? "active" : "")}>
         <label htmlFor="d3">{this.props.firstCol}</label>
         <Input id="d3" type="text" handleFocus={this.addClass} handleBlur={this.removeClass} />
       </div>
   );
  }
 });

module.exports = React.createClass({
   render: function () {
     <div className="demo demo2 lll">
       <InputContainer />
     </div>
     <div className="demo demo2">
       <InputContainer />
     </div>
     <div className="clear"></div>
  }
 });

本文标签： javascriptHow to dynamically add class to parent div of focused input fieldStack Overflow