小编dKa*_*Kab的帖子

如何在React.js中禁用按钮

我有这个组件:

import React from 'react';

export default class AddItem extends React.Component {

add() {
    this.props.onButtonClick(this.input.value);
    this.input.value = '';
}


render() {
    return (
        <div className="add-item">
            <input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} />
            <button disabled={!this.input.value} className="add-item__button" onClick={this.add.bind(this)}>Add</button>
        </div>
    );
}

}
Run Code Online (Sandbox Code Playgroud)

我想在输入值为空时禁用该按钮.但上面的代码不起作用.它说:

add-item.component.js:78 Uncaught TypeError:无法读取未定义的属性"value"

指着disabled={!this.input.value}.我在这里做错了什么?我猜测,当render执行方法时,可能还没有创建ref .如果,那么什么是workararound?

javascript reactjs

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

如何使用slim重定向

我有个问题.我正在使用苗条,我有我的主页的路线:

$app->get('/', function() use ($app) { ... 
Run Code Online (Sandbox Code Playgroud)

在我的一个控制器中,我想重定向到主页面,所以我写了

$app->response->redirect('/', 303);
Run Code Online (Sandbox Code Playgroud)

但是,我没有重定向到'/'路由,而是被重定向到我的本地服务器的根目录 http://localhost/

我究竟做错了什么?我该如何使用重定向方法?

php redirect slim

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

如何在angular 2指令中有条件地插入/删除主机DOM元素

我想创建一个指令,决定是否应该或不应该在页面上的主机元素apppear.理想情况下,我希望它从DOM中删除元素,而不是用css隐藏/显示它.用例是:

<ul role="navigation">
  <li><a>public link</a></li>
  <li><a>public link2</a></li>
  <li access="admin"><a>admin-only link</a></li>
</ul>
Run Code Online (Sandbox Code Playgroud)

它将使用UserService来获取currentUser角色,如果没有管理员,那么li将被删除.

我想ng-if通过将表达式传递给主要组件中的evaulate,我可以实现相同的效果(如果它仍然在角度2中可用).但是使用该指令它更具语义和优雅.

可能吗?

import {Directive} from 'angular2/angular2';

@Directive({
    selector: 'access'
})
export class Access {
 //what goes here
}
Run Code Online (Sandbox Code Playgroud)

我可以在角度1(内部指令的compile函数)中轻松完成,但我怎么能在Angular 2中做到这一点?

web-component angular2-directives angular

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

如何在Angular 2中收到服务数据之前延迟组件实例化?

我有一个服务,它使用其get方法从服务器获取数据:

export class UserService implements IRestService<User> {
    constructor(public http: Http) {
    }

    get(): Rx.Observable<User> {
        return this.http.get('api/ui_user', <any> {
            headers: {'Accept': 'application/json'}
            })
            .toRx()
            .map(res => res.json());
    }
Run Code Online (Sandbox Code Playgroud)

我有一个使用此服务的组件.

constructor(emplService: EmployeesService, userService: UserService){
    this.emplService = emplService;
    this.isDisplayMenu = false;
    this.user = new User();

    userService.get()
        .subscribe(usr => {
            this.user = usr;
        });
}
Run Code Online (Sandbox Code Playgroud)

因为数据是异步获取的,所以组件被实例化并呈现,并且仅在接收到该数据之后.View会被数据填充并最终看起来不错,但起初我在控制台中有错误:

GET data:image/png;base64,undefined net::ERR_INVALID_URL
Run Code Online (Sandbox Code Playgroud)

它发生在我看来:

 <img class="user-avatar" [src]="'data:image/png;base64,' + user.avatar">
Run Code Online (Sandbox Code Playgroud)

我希望组件在呈现自身之前等待直到收到数据.这可能吗?我在考虑生命周期钩子,但文档很差,我无法理解.

web-component typescript angular

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

为什么在我的测试中ngForm"控制"属性是空的?(角)

我有一个采用模板驱动形式的组件

<form (ngSubmit)="onSearchCorpus(form)" #form="ngForm">
<combo-box [(ngModel)]="model.corpus" name="corpus" #corpus="ngModel"></combo-box>
<input [(ngModel)]="model.label" name="label" id="label" type="text" required pattern="^(?!\s*$)[\w\_\-\:\s]*" maxlength="50" class="form-control label-name" autocomplete="off" #label="ngModel">
<textarea [(ngModel)]="model.query" name="query" id="query" maxlength="3600" required validateQuerySyntax class="form-control search-query" #query="ngModel" #queryControl
        placeholder="Example: (&quot;grantee&quot; OR &quot;grant&quot; OR &quot;sponsor&quot; OR &quot;contribute&quot; OR &quot;contributor&quot;) NEAR (&quot;non-profit organization&quot; OR &quot;charities&quot;)">
      </textarea>
 <button [disabled]="corpusValidationInProgress" type="submit" class="button-level-one">Search</button>
</form>
Run Code Online (Sandbox Code Playgroud)

在处理表单提交的方法中,我访问控制 NgForm实例的属性,它在浏览器中工作正常.

onSearchCorpus(formData: NgForm) {
   ...
   const corpusErrors = formData.controls.corpus.errors;
   ...
}
Run Code Online (Sandbox Code Playgroud)

但是,当我尝试使用Karma测试此方法时,NgForm的controls属性为空.我很困惑为什么会这样.该方法失败并出错cannot read property "errors" of undefined.

以下是我的测试结果:

it('should not perform corpusSearch …
Run Code Online (Sandbox Code Playgroud)

javascript unit-testing angular2-forms angular2-testing angular

4
推荐指数
1
解决办法
1252
查看次数

如何从 Windows 批处理脚本通过 curl 发送带有 json 正文的 POST 请求

我正在编写应该使用 json 发送请求的批处理脚本。

call curl -X POST -H 'Content-type: application/json' --data '{"text": "Pull requests:\n%linksText% has been deployed to %stagingServerUrl%", "username": "Staging Server"}' http://requestb.in/ovehwtov
Run Code Online (Sandbox Code Playgroud)

我从 git bash 运行我的脚本,虽然它发送了请求,但正文格式不正确,就在它发送请求之前,我在控制台中看到错误:

curl: (6) Couldn't resolve host 'application'
curl: (6) Couldn't resolve host '"Pull'
curl: (6) Couldn't resolve host 'requests:\nhttp'
curl: (6) Couldn't resolve host 'has'
curl: (6) Couldn't resolve host 'been'
curl: (6) Couldn't resolve host 'deployed'
curl: (6) Couldn't resolve host 'to'
curl: (6) Couldn't resolve host 'unicorns2url",'
curl: (6) Couldn't resolve host …
Run Code Online (Sandbox Code Playgroud)

curl cmd batch-file windows-console git-bash

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

如何从路径中分离文件名?basename()与带有array_pop()的preg_split()

为什么basename()在PHP脚本中使用此函数实际执行的操作可能分为两行:

$subFolders = preg_split("!\\\|\\/!ui", $path);  // explode on `\` or `/`
$name = array_pop($subFolder);  // extract last element's value (filename)
Run Code Online (Sandbox Code Playgroud)

我错过了什么吗?

但是,如果文件名中有一些\或其中/,我猜这上面的代码可能无法正常工作.但这不可能,对吗?

php regex filenames filepath

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

为什么数字在画布上会出现扭曲?

我正在玩 html5 画布,我遇到了一些奇怪的行为。我正在根据以下三个步骤制作非常基本的动画:

  1. 我在里面调用 update() 函数,我改变了对象的 x 和 y。
  2. 我用这行代码清除画布 this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  3. 我重绘了所有元素。

这就是我绘制数字的方式:

// drawing a circle
function drawCircle(x,y) {
    var rad = 5;
    ctx.beginPath();
    ctx.arc(x, y, rad, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
}

// and a rect
function drawRect(x, y,) {
     var width = 60,
       height = 10;
    ctx.fillRect(x, y, width, height);
}
Run Code Online (Sandbox Code Playgroud)

现在我希望我的矩形是 60px 宽和 10px 高。我在<canvas>标签后添加了一个 div并将其宽度和高度分别设置为 60px 和 10px 以说明差异。正如你在图片上看到的,显然我的矩形不是 60?10。这同样适用于圆。我在这里缺少什么? 在此处输入图片说明

是小提琴

html javascript css canvas

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

为什么Twig渲染空白页面?

所以在我的控制器中我写道:

...
public function execute()
{
    $dbh = AppHelper::instance()->getConnection();
    $manager = new PostManager($dbh);
    $posts = $manager->getAllPosts();
    $twig = AppHelper::twig();
    // var_dump($twig);
    //var_dump($posts);
    $twig->render("posts.html.twig", array( 
        'title'=>'??? ??????',
        //'posts'=>$posts,
        'debug' => true
        ));
}
...
Run Code Online (Sandbox Code Playgroud)

我有一个基本的布局树枝模板:

<!DOCTYPE html>
<html>
<head>
    <title>
{% block title %}
{% endblock %} - ?????? ????
    </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <div>
        {% block content %}
        ??????????? ??? ? ???? ????????? ?????!!
        {% endblock %}
    </div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

我的帖子模板:

{% extends "main.html.twig" %}
{% …
Run Code Online (Sandbox Code Playgroud)

php template-engine twig

0
推荐指数
1
解决办法
1900
查看次数