小编Lin*_*n V的帖子

我有两个按钮:
1 - 跟随
2 - 取消关注

乍一看,将显示"关注"按钮,然后当您将鼠标悬停在"关注"按钮上时,我想让关注按钮消失并显示"取消关注"按钮,然后在"取消关注"按钮上方悬停一次后,我想要"关注"按钮出现和取消关注按钮消失,所以我该怎么做？

欢迎反馈.

HTML代码

<div class="btn-follow">Follow</div>
<div class="btn-unfollow">Unfollow</div>

CSS代码

.btn-follow {
    color: #FFF;
    background-color: #38B7EA;
    padding: 5px 0;
    width: 100px;
    margin: 0 auto;
    border-radius: 20px;
}
.btn-unfollow {
    color: #FFF;
    background-color: #A5BECB;
    padding: 5px 0;
    width: 100px;
    margin: 0 auto;
    border-radius: 20px;
}

我是新的反应和反应路由器.该应用程序是使用create-react-app创建的.我需要在我的应用程序中实现两个主要页面的路由.我尝试了很多选项,最后使用以下代码.

此代码在开发期间工作正常.但在构建应用程序后,它无法正常工作.到404页面的路线才会显示.请帮我解决这个问题.

<Router history={browserHistory}>
  <Route component={Root}>
    <IndexRoute component={App} />
    <Route path="/" component={App} />
    <Route path="/sna/:country" component={SNA} />
    <Route path="*" component={FourOFour}/>
  </Route>
</Router>

我曾经browserHistory使用以下代码在更改下拉列表时启用导航.

selectCountry(event){
    var value = event.target.value;
    browserHistory.push('/sna/' + value);
}

的package.json

  {
  "name": "my-app",
  "version": "0.1.0",
  "homepage": "./",
  "private": true,
  "dependencies": {
    "bootstrap": "^3.3.7",
    "react": "^15.4.2",
    "react-addons-update": "^15.4.2",
    "react-bootstrap": "^0.30.8",
    "react-data-grid": "^2.0.24",
    "react-dom": "^15.4.2",
    "react-router": "^2.6.0"
  },
  "devDependencies": {
    "react-scripts": "0.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom", …

我正在使用react-data-grid在页面中显示可编辑的表.我用于editable: true启用可编辑列.但我有一些不可编辑的行.我怎样才能在行级别中控制它？

请提出解决方案.PFB初始化数据网格.

<ReactDataGrid
    enableCellSelect={true}
    columns={this.state.columns}
    rowGetter={rowGetter}
    rowsCount={this.state.rows.length}
    rowHeight={35}
    minHeight={500}
    onGridRowsUpdated={this.handleGridRowsUpdated}/>

我已经使用 Bootstrap div 制作了下表，但它对移动设备不响应​​。我已经使用了 col-xs，但列在移动视图中仍然相互合并。是否有其他方法使此代码响应移动设备？

<div class="container" style="color: grey; padding-top: 40px">
    <div class="row">
        <div class="col-md-12 col-xs-12">
            <div class="col-xs-12" style="border-bottom: 1px solid #eee;">

                <div class="col-md-6 col-xs-4">
                    <span>Item</span>
                </div>

                <div class="col-md-1 col-xs-1">
                    <span>Price</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Quantity</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Total</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Delivery Charge</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Discount</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Subtotal</span>
                </div>
            </div>


         </div>

</div>

    <div class="row">
        <div class="col-md-12 col-xs-12">
            <div class="col-md-6 col-xs-6">
                <div class="col-md-5 col-xs-5">
                <img src="https://n1.sdlcdn.com/imgs/a/i/0/large/Mboss-Overnighters-SDL963993531-1-2f227.jpg" class="img-responsive">
                </div>
            <div class="col-md-7 col-xs-7 "> …