如何動態地將類添加到焦點輸入字段的父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

一種解決方案是將id值傳遞給addClass函數，並使用此Id以及焦點檢查來確定類是否應該更改。

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

另一種解決方案是分離您的組件。

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

Answer 2

由於您有一些簡單的邏輯（在聚焦時添加類），因此最好將其包裝到組件中並將此邏輯包裝到其中。

所以，我做了一個簡單的例子：

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

它基本上創建一個Input組件並添加input--focused如果輸入被聚焦，則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>
      );
    }
});

希望能幫助到你！