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

下面是我的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
        });
    }
});

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

var React=require（'React'）；
变量输入=要求（'./输入'）；
module.exports=React.createClass({
getInitialState:函数（）{
返回{
焦点：错误
}
},
渲染：函数（）{
返回
{this.props.firstCol}
{this.props.secondCol}
},
addClass:函数（）{
这是我的国家({
焦点：正确
});
},
removeClass:函数（）{
这是我的国家({
焦点：错误
});
}
});

这是我的输入组件.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} />
    }
}); 

var React=require（'React'）；
module.exports=React.createClass({
getInitialState:函数（）{
返回{
焦点：错误
}
},
render:function（）{
返回
}
}); 

若我关注输入字段，它会将“活动”类名添加到其父div中。 但是，所有输入字段也将添加到“活动”类中

---

如何只将类添加到焦点输入的父div，而不是全部。一种解决方案是将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({
getInitialState:函数（）{
返回{
焦点：错误
}
},
render:function（）{
返回
}
}); 

另一个解决方案是分离组件

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

module.exports=React.createClass({
addClass:函数（）{
这是我的国家({
焦点：正确
});
}
getInitialState:函数（）{
返回{
焦点：错误
}
},
render:function（）{
返回(
{this.props.firstCol}
);
}
});
module.exports=React.createClass({
渲染：函数（）{
}
});

因为您有一些简单的逻辑（在聚焦时添加类），所以最好将其包装到组件中，并将此逻辑包装到其中

所以，我举了一个简单的例子：

它基本上创建一个输入组件，并将

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

var Input=React.createClass({
getInitialState:函数（）{
返回{
isFocused:错误
};
},
onFocus:function（）{
这是我的国家({
是的
});
},
onBlur:function（）{
这是我的国家({
isFocused:错误
});
},
render:function（）{
var类=[]；
if（this.state.isFocused）{
push（'input--focused'）；
}
返回(
);
}
});

---

希望有帮助

谢谢@william martins它帮助了我，但是我只需要改变一个方法：

toggleFocus（）{this.setState（{isFocused:！this.state.isFocused}）；}