小编Ern*_*Kev的帖子

按下Enter键时,React阻止表单提交

我有以下React Search Bar组件,父容器可以在其中调用

<SearchBar onInputChange={this.handleInputChange} />

每次用户更改输入时,都会通知父容器.这就是我的搜索栏不需要任何提交按钮的原因.

但是,我发现如果我在搜索栏中按Enter键,整个页面就会刷新.我不想要那个.

我知道如果表单中有一个按钮,我可以调用event.preventDefault().但在这种情况下,我没有按钮,所以我不知道该怎么做

class SearchBar extends Component {
    constructor(props) {
        super(props);
        this.state = { value: '' };
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(e) {
        this.setState({ value: e.target.value });
        this.props.onInputChange(e.target.value);
    }

    render() {
        return (
        <div id="search-bar">
            <form>
            <FormGroup controlId="formBasicText">
                <FormControl
                type="text"
                onChange={this.handleChange}
                value={this.state.value}
                placeholder="Enter Character Name"
                />          
            </FormGroup>
            </form>
        </div>
        );
    }
}

export default SearchBar

我的文件夹结构看起来像

-myapp
    -assets
        -home-page-img
            -header-bg.jpg
    -src
        -app
        -home-page
            -home-page.component.css
            -home-page.component.html
            -home-page.component.ts

在我的home-page.component.css中,我有以下内容

header {
    width: 200px;
    height: 200px;
    background-image: url('/src/assets/home-page-img/header-bg.jpg');
}

My angular-cli.json
    "assets": [
    "assets",
    "favicon.ico"
]

当我运行代码时,我得到了

GET http://localhost:4200/src/assets/home-page-img/header-bg.jpg 404 (Not Found)

出于演示目的,如果我将背景图像更改为以下内容,则会出现完全不同的错误

background-image: url('assets/home-page-img/header-bg.jpg');

./src/app/home-page/home-page.component.css
Module not found: Error: Can't resolve './assets/home-page-img/header-bg.jpg' in '/Users/JohnSmith/Desktop/my-app/src/app/home-page'

如何加载该图像？

我正在使用Angular 2和Angular Material.查看文档,我试图让select具有默认值,与空占位符相反.

我尝试了以下两个选项,它们都没有设置默认值

<md-select selected="1">
  <md-option value="1" >One</md-option>
  <md-option value="2">Two</md-option>
</md-select>

<md-select>
  <md-option value="1" selected="true">One</md-option>
  <md-option value="2">Two</md-option>
</md-select>

我查看了所有文档和示例,但没有帮助

我正在尝试使用Angular Material 2的MdToolTip.语法如下

<span mdTooltip="Tooltip!">I have a tooltip</span>

但是,我想在我的锚标签上实现此功能.当class ="not-active"正在运行时,当我将鼠标悬停在ahchor标签上时,我想显示工具提示.我怎么能实现这个目标？

<a [ngClass]="{'not-active': !isCurrentUserExist}" [routerLink]="['/create-timesheet']">Link1</a>


/*disabled side menu links*/
.not-active {
   pointer-events: none;
   cursor: default;
}

Youtube视频演示了这个问题

演示应用程序的Github存储库

我有一个非常简单的应用程序,包含应用程序组件,子组件(帐户),处理消息对话框组件的警报服务(弹出模式).

出于演示目的,我有两个相同的形式,一个在app.component.ts内,一个在account.component.ts内.每个人都有一个按钮,可以调用警报服务来显示消息对话框模式.

问题是,当我单击子组件的表单的输入字段(account.component.ts)和"按键盘上的输入"时,我收到此错误

EXCEPTION:./AccountComponent类中的错误AccountComponent - 内联模板:2:2导致:表达式在检查后发生了更改.上一个值:'true'.当前值:'false'.请注意,在下面提到的任何其他情况下都不会出现此错误

1. 如果我单击按钮而不是按键盘上的Enter键

2. 即使按Enter键,app.componen.ts中的表单也没有任何问题.它似乎只是子组件(accouunt.component.ts).

3. 如果我点击account.component的输入,输入内容,点击按钮,没有显示错误,删除输入,按回车,现在没有显示错误比较之前

我调查了SO和google,似乎人们遇到了同样的问题并通过调用change detect来解决它.但是,我已经尝试过并把它放在诸如模态显示之后的地方并且它不起作用.此外,如果这将解决它,那么它不解释为什么app.component.ts中的表单不会导致我这个错误.

下面是一些代码片段,完整的演示项目可以在上面的github链接中找到.这个问题困扰了我好几天.非常感谢您的帮助.

app.component.html

<label>This form is from app.component.html</label>
<form name="form" [formGroup]="changePasswordForm" (ngSubmit)="onUpdatePassword()">
    <input placeholder="Old Password" formControlName="oldPassword">
    <button class="btn btn-success">Update Password</button>
</form>

<br><br><br><br>

<label>This form is from account.component.html</label>
<router-outlet> </router-outlet>

<template ngbModalContainer></template>

app.component.ts

export class AppComponent implements OnInit {

    private changePasswordForm: FormGroup;

    constructor(
      private formBuilder: FormBuilder,
      private alertService: AlertService,
    ) { }

    ngOnInit() {
      this.changePasswordForm = this.formBuilder.group({
        oldPassword: [''],
      })
    }

    onUpdatePassword() {
      this.alertService.alertPopup('test2', 'asfafa')
    }
}

account.component.html

<form …

我有以下 bootstrap 4 按钮代码。我发现只有在我的移动设备上，该按钮在单击后仍保持突出显示状态。它的颜色与我将鼠标悬停在桌面设备上时的颜色完全相同

<button class="btn btn-outline-primary d-inline">
  Search 
  <i class="fa fa-search float-right" aria-hidden="true"></i>
</button>

或者换句话说，这几乎与我单击桌面鼠标上的按钮并且不将鼠标悬停一样。

对我来说，似乎发生了以下情况之一

1. 在移动设备上，单击按钮模拟将鼠标移动到该点并触发单击事件。然而，移动设备上的“隐形”鼠标永远不会悬停？？

2. 还有别的事吗？

我怎样才能摆脱这种行为？

如果我想保存到 firebase 的数据无效，我有以下代码会在控制台中向我抛出一些 firebase 异常。我想捕获它并以受控方式将其显示在屏幕上，而不是从控制台中查找。我不知道为什么我的 .catch 没有捕获任何 firebase 异常？

this.databaseService.saveCodesToFirebase(jsonFromCsv)
  .then(result => {
    this.alertService.alertPopup('Success', 'Code Updated')
  })
  .catch(error => {
    this.errorMessage = 'Error - ' + error.message
  })


saveCodesToFirebase(myObj: Object) {
    let ref = firebase.database().ref();

    let path = this.userService.getCurrentUser().companyId + '/codes/'
    let lastUpdatedPath = this.userService.getCurrentUser().companyId + '/lastUpdated/';

    var updates = {}

    updates[path] = jobObject;
    updates[lastUpdatedPath] = Math.round(new Date().getTime() / 1000);

    return ref.child('codes').update(updates);
}

例外：Firebase.update 失败：第一个参数在属性“codes.apple20170318.codes”中包含无效的键 ()。键必须是非空字符串，并且不能包含“.”、“#”、“$”、“/”、“[”或“]”

我想在我的动作生成器中添加一个 isLoading 标志并在我的减速器上重置它。最初没有标志，我的代码工作，动作如下所示

export function getList() {
    const FIELD = '/comics'
    let searchUrl = ROOT_URL + FIELD + '?ts=' + TS + '&apikey=' + PUBLIC_KEY + '&hash=' + HASH;
    const request = axios.get(searchUrl)
    return {
        type: FETCH_LIST, 
        payload: request,
    }
}

和减速机看起来像

const INITIAL_STATE = { all: [], id: -1, isLoading: false };

export default function (state = INITIAL_STATE, action) {
    switch (action.type) {
        case FETCH_COMIC_LIST: 
            console.log('reducer action =', action, 'state =', state)
            return {
                ...state, 
                all: action.payload.data.data.results,
                isLoading: false …

我正在使用React构建一个从某些API获取数据的简单应用程序.当他们中的一些人没有回来时,我不确定处理这些领域的最佳方法是什么.例如,假设JSON数据返回如下所示

comicDetail : {
    name : iron man, 
    age: {
        comicAge: 35,   
    },
    favouriteFood: {
        fruit: {
            apple
        }
    }
    hobby: {
        favourite: {
            build machines        
        }
    }
    series: [iron man 1, iron man 2]
    relationship: {
        jane: iron man 1, 
        Mary: iron man 2
    }, 
    collection : {
            image : www.image1.com 
        }            
    }
}

我的React代码,用于呈现数据

renderComicDetail() {
    var cd = this.props.comicDetail;        
    if (!cd) {
        return (
            <div>No Data</div>
        )
    }
    const imageUrl = cd.collection.image
    return (
        <div>
            <div>age: {cd.age.comicAge}</div> …

我正在使用Angular材料2,我遇到了这个问题,其中md-sidenav-content只占用了内容的高度.但是,我希望它是100%的高度或内容高度(以最大者为准).请注意,md-sidenav-container的父容器确实具有我想要的完整高度.

但是,在我的应用程序中没有任何地方我使用md-sidenav-content.它似乎是Angular Material 2本身产生的东西.所以我不能改变它的属性.

出现这个问题,我不能让绿色背景跨越整个高度.

// app.component.html
<md-sidenav-container>

<!--side nav-->
<md-sidenav #sidenav mode="over" class="app-sidenav">

    <!--header-->
    <div id="side-nav-header">
    <img id="side-menu-logo" src="../assets/images/logo_small.png"> MyApp
    </div>

    <!--body-->
    <a [mdTooltip]="!isCurrentUserExist ? 'Please login first!': ''" [routerLink]="['/create-timesheet']" (click)="sidenav.close()">Timesheet</a>

</md-sidenav>

<br><br>

<!--main content-->
<router-outlet></router-outlet>
</md-sidenav-container>


// login.component.html
<div id="login-container" class="container-fluid">
    <div class="row">
        <div id="login-component" class="col-md-6 offset-md-3">
            <md-card>

                <h2>Login</h2>

                <br>

                <form name="form" [formGroup]="loginForm" (ngSubmit)="onLogin()">

                    <!--email-->
                    <md-input type="email" placeholder="Email" formControlName="email"></md-input>
                    <label class="errorMessage" *ngIf="!loginForm.controls['email'].valid && loginForm.controls['email'].dirty" for="email">
            Email is required</label>

                    <!--password-->
                    <md-input type="password" placeholder="Password" formControlName="password"></md-input>
                    <label class="errorMessage" *ngIf="!loginForm.controls['password'].valid && loginForm.controls['password'].dirty" …