Javascript ReactJS中的自定义图像切换按钮

我有这段代码来显示一个自定义图像按钮，它可以在两个不同的图像之间切换打开和关闭状态。有没有更简单的方法？我希望CSS的代码行数少一些，但找不到一个简单的例子

下面的代码将状态从

向上传递到

，然后再传递到

。我的应用程序将在主屏幕上有4个自定义按钮，这就是我将

排除在外的原因

顺便说一句，这是一个移动应用程序，我读到（我自己也注意到）在移动浏览器上使用复选框的速度非常慢；这就是为什么我选择不使用复选框来尝试这个

反应JS代码

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

var MyIconButton=React.createClass({
handleSubmit:函数（e）{
e、 预防默认值（）；
log（“内部：MyIconButton handleSubmit”）；
//更改按钮的开/关状态，
//然后通过网络将状态发送到食物链上
//this.props.updateFilter（b_buttonOn）。
var b_buttonOn=false；
如果（this.props.pressed===true）{
b_=false；
}
否则{
b_=true；
}
//updateFilter是指向调用React组件中的方法的“指针”。
this.props.updateFilter（b_buttonOn）；
},
render:function（）{
//显示或关闭图像。
//**我可以使用？：在JSX/HTML中，但更喜欢长格式，以使其明确可见。
var buttonImg=“”；
如果（this.props.pressed===true）{
buttonImg=this.props.onpic；
}
否则{
buttonImg=this.props.offpic；
}
返回(
);
}
});
//没有自己的状态，
//通过州
//直接到。
var MyPartyCatButton=React.createClass({
render:function（）{
返回(
);
}
});
//
//主应用程序视图
var MyHomeView=React.createClass({
getInitialState:函数（）{
//这是我最终从服务器获取数据的地方。
返回{
b_MyPartyCat：对
};
},
updatePartyCategory:函数（值）{
//最终将向服务器写入值。
this.setState（{b_MyPartyCat:value}）；
log（“内部：MyHomeView（）updatePartyCategory（）”+this.state.b_MyPartyCat）；
},
render:function（）{
返回(
//最终将有3个其他类别，即书籍、滑板、树木！
);
}
});

如果动态更新组件“pressed”prop（就像您所做的那样），只需

var MyIconButton=React.createClass({
render:function（）{
var pic=this.props.pressed？this.props.onpic:this.props.offpic
返回
}
})

（编辑：通过这种方式，在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 )
}

render:function（）{
返回
}
updatePartyCategory:函数（e）{
此.setState（
{PartyCatPressed:！this.state.PartyCatPressed}//此反转PartyCatPressed值
);
log（“内部：MyHomeView（）updatePartyCategory（）”+this.state.b_MyPartyCat）
}

)

但如果没有，请使用prop作为默认值：

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

var MyIconButton=React.createClass({
getInitialState:函数（）{
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
返回
}
})

StackOverflow不是提出“有什么想法”之类问题的好地方。react google组，或者irc.freenode.net上的#react JS是解决这类问题的好地方。我改写了，现在看起来怎么样？很好，好多了。我认为它只需要再进行一次重新开放投票。我不知道这种方式如何将按钮的切换状态传递回家长？我更新了问题，以便在描述中正确显示组件名称。很好，不需要标签-）

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