[英]Custom image toggle button in ReactJS
I have this ReactJS code to show a custom image button that toggles between 2 different images for ON and OFF state. 我有这个ReactJS代码来显示一个自定义图像按钮,可以在两个不同的图像之间切换ON和OFF状态。 Is there a simpler way to do this?
有更简单的方法吗? I was hoping CSS might be less lines of code, but wasn't able to find a simple example.
我希望CSS可能没有更少的代码行,但却无法找到一个简单的例子。
The code below passes state up from <MyIconButton>
to <MyPartyCatButton>
then to <MyHomeView>
. 下面的代码将状态从
<MyIconButton>
传递到<MyPartyCatButton>
然后传递到<MyHomeView>
。 My app will have 4 of these custom buttons on the home screen, which is why I factored out <MyIconButton>
. 我的应用程序将在主屏幕上有4个这样的自定义按钮,这就是我将
<MyIconButton>
考虑在内的原因。
btw - this is for a mobile App and I read (and noticed this myself) it's really slow using checkboxes on mobile browsers; 顺便说一句 - 这是一个移动应用程序,我读(并注意到这一点)它在移动浏览器上使用复选框真的很慢; that's why I chose to try this without using checkboxes.
这就是为什么我选择不使用复选框来尝试这个。
ReactJS code ReactJS代码
var MyIconButton = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
console.log("INSIDE: MyIconButton handleSubmit");
// Change button's state ON/OFF,
// then sends state up the food chain via
// this.props.updateFilter( b_buttonOn ).
var b_buttonOn = false;
if (this.props.pressed === true) {
b_buttonOn = false;
}
else {
b_buttonOn = true;
}
// updateFilter is a 'pointer' to a method in the calling React component.
this.props.updateFilter( b_buttonOn );
},
render: function() {
// Show On or Off image.
// ** I could use ? : inside the JSX/HTML but prefer long form to make it explicitly obvious.
var buttonImg = "";
if (this.props.pressed === true) {
buttonImg = this.props.onpic;
}
else {
buttonImg = this.props.offpic;
}
return (
<div>
<form onSubmit={this.handleSubmit}>
<input type="image" src={buttonImg}></input>
</form>
</div>
);
}
});
// <MyPartyCatButton> Doesn't have it's own state,
// passes state of <MyIconButton>
// straight through to <MyHomeView>.
var MyPartyCatButton = React.createClass({
render: function() {
return (
<MyIconButton pressed={this.props.pressed} updateFilter={this.props.updateFilter} onpic="static/images/icon1.jpeg" offpic="static/images/off-icon.jpg"/>
);
}
});
//
// Main App view
var MyHomeView = React.createClass({
getInitialState: function() {
// This is where I'll eventually get data from the server.
return {
b_MyPartyCat: true
};
},
updatePartyCategory: function(value) {
// Eventually will write value to the server.
this.setState( {b_MyPartyCat: value} );
console.log("INSIDE: MyHomeView() updatePartyCategory() " + this.state.b_MyPartyCat );
},
render: function() {
return (
<div>
<MyPartyCatButton pressed={this.state.b_MyPartyCat} updateFilter={this.updatePartyCategory}/>
</div>
// Eventually will have 3 other categories i.e. Books, Skateboards, Trees !
);
}
});
if you update the coponent 'pressed' prop dynamically (like you did), simply 如果你动态更新组合'按下的'道具(就像你做的那样),简单地说
var MyIconButton= React.createClass({
render: function(){
var pic= this.props.pressed? this.props.onpic : this.props.offpic
return <img
src={pic}
onClick={this.props.tuggleSelection} //updateFilter is wierd name
/>
}
})
(EDIT: this way, on MyPartyCatButton component, you can pass function to handle 'tuggleSelection' event. event function argument is an event object , but you have the button state allready in the wrapper state (the old one, so you should invert it). your code will be something like that: (编辑:这样,在MyPartyCatButton组件上,你可以传递函数来处理'tuggleSelection'事件。事件函数参数是一个事件对象 ,但是你的按钮状态已经处于包装状态(旧的状态,所以你应该反转它)你的代码将是这样的:
render: function(){
return <MyIconButton pressed={this.state.PartyCatPressed} tuggleSelection={this.updatePartyCategory} />
}
updatePartyCategory: function(e){
this.setState(
{PartyCatPressed: !this.state.PartyCatPressed} //this invert PartyCatPressed value
);
console.log("INSIDE: MyHomeView() updatePartyCategory() " + this.state.b_MyPartyCat )
}
) )
but if you don't, use prop for defult value: 但如果你不这样做,请使用prop作为defult值:
var MyIconButton= React.createClass({
getInitialState: function(){
return {pressed: this.props.defultPressed}
},
handleClick: function(){
this.setState({pressed: !this.state.pressed})
},
render: function(){
var pic= this.state.pressed? this.props.onpic : this.props.offpic
return <img
src={pic}
onClick={this.handleClick}
/>
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.