javascript - 如何动态地将类添加到焦点输入字段的父 div？

Question

下面是我的form.jsx文件

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
        });
    }
});

这是我的输入组件 .jsx 文件

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} />
    }
}); 

如果我专注于输入字段，它会将“active”className 添加到其父 div。 但是，所有输入字段也将添加“事件”类。

我该怎么做才能只将类添加到重点输入的父 div 而不是全部。

Answer 1

既然你有一些简单的逻辑(聚焦时添加类)，那么最好将其包装到一个组件中并将这个逻辑包装到它里面。

所以，我做了一个简单的例子:

https://jsfiddle.net/hLuv0c65/1/

它基本上创建了一个 Input 组件，如果输入是聚焦的，则将 input--focused 添加到父 div:

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>
      );
    }
});

希望对您有所帮助!