admin管理员组文章数量:1323330
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.
Share edited Dec 14, 2015 at 16:29 Giannis Tzagarakis 5306 silver badges29 bronze badges asked Dec 14, 2015 at 14:50 DreamsDreams 8,50611 gold badges50 silver badges73 bronze badges2 Answers
Reset to default 3Since 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
版权声明:本文标题:javascript - How to dynamically add class to parent div of focused input field? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742139562a2422521.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论