小编cbl*_*bll的帖子

React-bootstrap选项卡:警告:在`<TabContainer>`的上下文中,`<NavItem>`被赋予生成的`id`和`aria-controls`属性

每当为我加载导航栏时,我都会收到此警告.我不知道该怎么做或它意味着什么 - 我试过添加一个没有运气的父div.generateChildId根据其文档的属性仅将函数作为输入.超级混乱.

完全警告:

Warning: In the context of a `<TabContainer>`, `<NavItem>`s are given generated `id` and `aria-controls` attributes for the sake of proper component accessibility. Any provided ones will be ignored. To control these attributes directly, provide a `generateChildId` prop to the parent `<TabContainer>`.
Run Code Online (Sandbox Code Playgroud)

为此,导航栏+标签完全按预期工作.它只是在控制台中不断抛出此警告.

从这里使用的示例,示例代码:

  <Tab.Container id="tabs-with-dropdown" defaultActiveKey="first">
    <Row className="clearfix">
      <Col sm={12}>
        <Nav bsStyle="tabs">
          <NavItem eventKey="first">
            Tab 1
          </NavItem>
          <NavItem eventKey="second">
            Tab 2
          </NavItem>
          <NavDropdown eventKey="3" title="Dropdown" id="nav-dropdown-within-tab">
            <MenuItem eventKey="3.1">Action</MenuItem>
            <MenuItem eventKey="3.2">Another action</MenuItem>
            <MenuItem eventKey="3.3">Something …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-bootstrap

6
推荐指数
1
解决办法
1254
查看次数

MobX中的Ajax调用:MobX观察者:商店不可用!确保它是由某个提供商提供的

我正在从具有树结构的传统React应用程序迁移到使用MobX的状态管理结构.

目前,我的各个组件传播来自父/祖父母进行的Ajax调用的数据,这很好.

现在我希望改变这一点,因为我不再在树形结构中工作,因为并行孙子/孩子的复杂性和依赖性的变化.

说我做一个axios.getcomponentDidMount一个的<Parent1/>阵营类.我如何使用MobX?访问数据?

到目前为止我尝试过的:

创建一个store.jsx看起来如此:

import { observable } from 'mobx';
const axios = require('axios');

class Store {
    @observable parentdata;
    loadParent = () => {
        let that = this;
        axios.get("/api/parent").then(function(response){
            that.parentdata = response.parentdata;
        }).catch(function(error){
         // Error handling
        })
    };
}

export default Store;
Run Code Online (Sandbox Code Playgroud)

ReactDOM的呈现container.jsx包含所有父母,也意味着<Parent1/>.在container.jsx我们做以下事项:

import { Provider } from 'mobx-react';

import Store from './store/store.jsx';
let store = new Store();
Run Code Online (Sandbox Code Playgroud)

ReactDOM.render( …
Run Code Online (Sandbox Code Playgroud)

ajax reactjs mobx axios

6
推荐指数
1
解决办法
942
查看次数

如何使用 React 以编程方式填充输入字段值?

我有一个带有一些输入字段的模式。我可以轻松地在用户键入输入时自动传递数据,使用onChange输入字段中的函数,如

<Input onChange={this.props.store.handleCategoryChange} type="text" />
Run Code Online (Sandbox Code Playgroud)

和..(使用 mobx 商店,虽然无关紧要)

@observable categoryValue;
@action handleCategoryChange = (e, data) => {
    this.categoryValue = data.value;
    e.preventDefault();
};
Run Code Online (Sandbox Code Playgroud)

但是,我想添加一个功能,用户可以在该功能中使用应用程序中其他地方的信息预先填充它。我有用于预填充输入字段的数据,但我无法弄清楚如何在没有用户执行的情况下以编程方式实际输入它?

我需要调用上面的handleCategoryChange函数。但是我的变量将等于data.value.. 这提出了一个问题!自己调用这个函数是不可能的,因为我不会有事件e或值被调用,data.value因为我会“只是”自己传递一个变量。

在 React 中使用其他地方的变量以编程方式自动填充输入字段的正确方法是什么?我需要以onChange某种方式调用该函数,但输入值会有所不同..

javascript reactjs

6
推荐指数
2
解决办法
2万
查看次数

如何设置react-table过滤器输入字段的样式?

我正在使用react-table并且每个列都有一个过滤方法.但是,我似乎无法弄清楚我是如何实际设置过滤器输入字段的样式 - 它现在是白色并与背景混合.

这是一个codepen,其中"Last Name"列是可过滤的,带有一个输入字段:https://codepen.io/anon/pen/QgOdOp?editors = 0010

我想在这个输入字段中添加一些语义样式,例如:

                    <div className="ui icon input">
                        // Input values would go here
                        <i className="search icon" />
                    </div>
Run Code Online (Sandbox Code Playgroud)

但我似乎不知道如何将输入值绑定到列本身.

我在特定列中尝试了以下内容,但它没有呈现任何内容:

{
    Header: 'Last Name',
    filterable: true,
    id: 'lastName',
    accessor: d => d.lastName
    Filter: Cellinfo => (
                <div className="ui icon input">
                     <select onChange={event => onFiltersChange(event.target.value)} value={filter ? filter.value : ''}></select> 
                    <i className="search icon" />
                </div>
    )
  }
Run Code Online (Sandbox Code Playgroud)

input-filter reactjs

6
推荐指数
1
解决办法
9157
查看次数

Material-ui:警告:未知的事件处理程序属性`onKeyboardFocus`.它会被忽略

更详细的追踪:

warning.js:33 Warning: Unknown event handler property `onKeyboardFocus`. It will be ignored.
    in div (created by IconMenu)
    in div (created by IconMenu)
    in IconMenu (created by DropdownMenu)
    in div (created by DropdownMenu)
Run Code Online (Sandbox Code Playgroud)

我有一个带有IconButtonElement道具的IconMenu.出于某种原因,它一直在抛出这个警告.为什么?它是什么?

触发的示例代码是:

<IconMenu
    iconButtonElement={
        <div>
            <IconButton onClick={this.handleTouchTap}>
                <div >
                    <img src={require("../../settingsicon.svg")}/>
                </div>
            </IconButton>
        </div>}
    open={this.state.open}
    anchorOrigin={{horizontal: "right", vertical: "bottom"}}
    targetOrigin={{horizontal: "right", vertical: "top"}}
>
    <MenuItem
        className={someClass}
        onClick={this.handleLogOutClick}
    >
        <span className={someClass}Hello</span>
    </MenuItem>
    <Divider className={someClass}/>
    <MenuItem className={someClass}>
        <span className={someClass}>Goodbye</span>
    </MenuItem>
</IconMenu>
Run Code Online (Sandbox Code Playgroud)

这是一个非常简单的例子,几乎从带有一些函数的文档中复制粘贴到菜单项,但没有任何东西应该抛出这样的错误.即使我做了一个完整的准系统示例 - 它仍然会发出警告.每次页面加载时都在控制台中有点难看:)

typescript reactjs material-ui

6
推荐指数
1
解决办法
9286
查看次数

ES6 fetch:如何更改它调用的本地主机端口?

我有一个运行 node.js 的 webpack-dev-server 来:8080为我的前端提供服务。我有一个 Spring Boot MVC 应用程序在:8088为我的实际后端服务提供服务。

我有一个登录系统,我想在 :8088 上调用,如何更改fetch要引用的函数的永久设置,:8088而不是:8080每次调用函数时?

我尝试了以下方法,但无济于事:

login ({commit}, authData) {
      fetch('/api/login', {
        username: authData.username,
        password: authData.password
      }, {
        mode: 'no-cors',
        method: 'post',
        url: `http://localhost:8088`,
        credentials: 'include'
      }) // ... goes on 
Run Code Online (Sandbox Code Playgroud)

但是,它仍然指的是8080:

bodyUsed: false
headers: Headers {  }
ok: true
redirected: false
status: 200
statusText: "OK"
type: "basic"
url: "http://localhost:8080/api/login"
Run Code Online (Sandbox Code Playgroud)

javascript spring ecmascript-6 fetch-api

6
推荐指数
1
解决办法
1万
查看次数

React-native TouchableOpacity 按钮不尊重边框/边框半径

我创建了一个通用按钮,我希望它具有圆形边缘而不是方形。我的按钮组件是这样的:

const Button = ({ onPress, children }) => {
  const { buttonStyle, textStyle } = styles;

  return (
    <TouchableOpacity onPress={onPress} style={buttonStyle}>
      <Text style={textStyle}>
          {children}
      </Text>
    </TouchableOpacity>
  );
};

const styles = {
    textStyle: {
        alignSelf: 'center',
        color: colors.primaryTeal,
        fontSize: 16,
        fontWeight: '600',
        paddingTop: 10,
        paddingBottom: 10,
    },
    buttonStyle: {
        flex: 1,
        backgroundColor: colors.whiteText,
        marginLeft: 5,
        marginRight: 5,
        borderRadius: 50
    }
};
Run Code Online (Sandbox Code Playgroud)

然而,它仍然是方形的,borderRadius根本没有任何反应。

它是这样调用的:

<Button onPress={this.onButtonPress.bind(this)}>
    Log in
</Button>
Run Code Online (Sandbox Code Playgroud)

如何让它尊重 borderRadius 并获得圆边?

它出现的登录表单(渲染)

  render() {
    return (
        <Card> …
Run Code Online (Sandbox Code Playgroud)

react-native

6
推荐指数
1
解决办法
2万
查看次数

如何使用已设置的管理员凭据通过 docker-compose 启动 gitlab-ce 容器?

我有一个docker-compose.yml带有 Gitlab CE 容器的文件:

services:
  // other services..
  gitlab:
    image: 'gitlab/gitlab-ce'
    restart: always
    ports:
      - '80:80'
      - '443:443'
      - '22:22'
      - "127.0.0.1:8081:80"
    volumes:
      - '/etc/gitlab'
      - '/var/log/gitlab'
      - '/var/opt/gitlab'
    networks:
      - backend
Run Code Online (Sandbox Code Playgroud)

启动时,这需要您打开浏览器,转到(在本例中)localhost:8081并手动输入密码。

我希望这个过程能够自动化(用于本地开发和测试目的)。

Gitlab 自己的答案:

    gitlab-rails console production
    user = User.where(id: 1).first
    user.password = 'somethingsomething'
    user.password_confirmation = 'somethingsomething'
    user.save!
    exit
Run Code Online (Sandbox Code Playgroud)

如果我在一切设置完毕后 ssh 进入 Gitlab CE 容器(需要几分钟),那么它就可以工作。

直接通过运行此命令command不起作用 - 可能是因为gitlab-rails console容器启动时尚未准备好运行。

我尝试使用Dockerfile图像手动创建一个gitlab/gitlab-ce,用于COPY将上述脚本放入容器及其中CMD。然而,正如预测的那样,这会失败,因为gitlab-rails console …

gitlab docker docker-compose

6
推荐指数
1
解决办法
9729
查看次数

Rust/Rocket:结构体未实现特征 `serde::ser::Serialize`

我正在尝试使用 Rocket 创建一个简单的端点。我的Cargo.toml有这些依赖项:

[dependencies]
rocket = "0.4.2"
rocket_codegen = "0.4.2"
rocket_contrib = "0.4.2"
Run Code Online (Sandbox Code Playgroud)

main.rs好像:

#[macro_use]
extern crate rocket;

use rocket_contrib::json::Json;
use serde::Serialize;

#[get("/org")]
fn getorg() -> Json<Org> {
    Json(Org {
        id: Option::from(25),
        name: "Incredible-Customer".to_string(),
    })
}
#[derive(Serialize)]
pub struct Org {
    pub id: Option<i32>,
    pub name: String,
}

fn main() {
    rocket::ignite().mount("/", routes![getorg]).launch();
}
Run Code Online (Sandbox Code Playgroud)

编译结果出现错误:

[dependencies]
rocket = "0.4.2"
rocket_codegen = "0.4.2"
rocket_contrib = "0.4.2"
Run Code Online (Sandbox Code Playgroud)

我对如何调查这个错误感到非常困惑。是依赖问题吗?为什么?我已将rocket依赖项版本化为同一依赖项,但显然这种serde依赖项并不令人满意。谷歌搜索声称这是我的依赖项之一内的版本不匹配 - 但我该如何自己解决这个问题?

rust rust-rocket

6
推荐指数
1
解决办法
8037
查看次数

vue-router如何持久化navbar?

我正在学习来自React的Vue,并想知道保持导航栏的正确方法是什么 - 我在那里使用路由器链接进行导航.

我有一个带有路由器链接的导航栏组件,但它在前往另一条路线时正在重新加载.有没有办法坚持它在身体组件的"外部"?比如在前往新路线时不会重新渲染?

我尝试将它放在路由器视图之外,但它不会在任何地方呈现:

<template>
  <div id="app">
    <topnavbar>
    </topnavbar>
    <router-view>
    </router-view>
  </div>
</template>
Run Code Online (Sandbox Code Playgroud)

如果它进入内部相同.

如何坚持导航栏?它应该是进入路由器的所有组件的父级,还是最佳实践?

vue.js vue-router vuejs2

5
推荐指数
1
解决办法
4990
查看次数