小编kin*_*ser的帖子

我正在使用@input从父组件接收属性,以便在子组件的元素之一中激活CSS类.

我可以从父母那里收到房产并激活班级.但这只能工作一次.我从父级接收的属性是一个类型的布尔数据,当我将它的状态设置为false来自子组件时,它在父级中不会改变.

Plunkr:https://plnkr.co/edit/58xuZ1uzvToPhPtOING2 ? p = preview

app.ts

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { HeaderComponent } from './header';
import { SearchComponent } from './header/search';

@Component({
  selector: 'my-app',
  template: `
    <app-header></app-header>
  `,
})
export class App {
  name:string;
  constructor() {
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, HeaderComponent, SearchComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

header.ts

import { Component, OnInit } from '@angular/core'; …

在我的应用程序中,我有一个按钮,甚至可以点击它:

<button class="btn btn-default" (click)="doSomething()">

从doSomething方法中,有没有办法(click)从按钮中删除事件(因此用户不能再触发功能？).

我试图在按钮上设置一个禁用的道具,但它不会改变Angular2的行为.

我试着用(click)="doSomething($event),然后

doSomething($event) {
  // My method logic goes here
  ...
  ...
  console.log('Method Logic');

  //Attempt to overwrite click event
  let target = event.target || event.srcElement || event.currentTarget;
  this.renderer.listen(target, 'click', (event) => {
      console.log('clic block');
    });
}

但它不会"替换"click事件.因此,在此之后,单击时,将触发原始逻辑和"单击块"控制台日志!

这是原始问题:获取JavaScript对象键列表

但如果情况稍微复杂一点,如:

var obj = [
   { key1: 'value1' },
   { key2: 'value2' },
   { key3: 'value3' },
   { key4: 'value4' }
]

那你怎么得到这样的钥匙？

[key1,key2,key3,key4]

我有一个 Parent 组件，它充当其子组件的包装器。如何将道具传递给将使用以下格式呈现的孩子？

import React, { useEffect, useState } from 'react';

const Parent = ({ children }) => {
  const [completeState, setCompleteState] = useState(false);

  useEffect(
    () => {
      /* .. code that runs then sets completeState to true */
    setCompleteState(true);
     }, []
  );

  return (
     <section>
       /* 
          how to pass a 'didComplete' prop to children?
           didComplete={completeState}
       */
       {children} // Child component below would be rendered here with the didComplete prop passed in
    </section>

  )
}

import React from 'react';

const …

我有一个重复三次的数组['2530491','2530491','2530491','2530492']，2530491我想从其中的 3 个数组中删除单个值 2530491，因此输出将类似于 : ['2530491','2530491','2530492']。

fileArrayAnnounce_size = jQuery.grep(fileArrayAnnounce_size, function(value){
  return value != file_size.metas[0].size;
});

我尝试抓握，但它消除了所有相同的价值。我只想从重复项中删除单个值。

我是ReactJS的新手.当我点击它时,我试图同时更改文本和按钮的颜色.此代码有效:

class ToggleHelp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isHelpOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isHelpOn: !prevState.isHelpOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <ToggleHelp />,
  document.getElementById('root')
);

但是,当我尝试使用如下所示的内联样式时,代码停止工作.

<button style={background:yellow} onClick={this.handleClick}>
  {this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'}
</button>

我已经尝试了几次,以各种方式做到这一点.我希望它能成为当下的内联风格.是否可以直接从React应用内联样式？如果是,那么想法是评估状态并通过条件语句在另一种颜色上设置一种颜色.

由于某种原因，我无法弄清楚，我在以下React组件中收到语法错误。该错误是在第一个curly bracket上renderItem()。怎么了？

先感谢您。

import _ from 'lodash';
import React from 'react';
import { ToDoListHeader } from './todo-list-header';
import { ToDoListItem } from './todo-list-item';

export const ToDoList = (props) => {
  renderItems() {
    return _.map(this.props.todos, (todo, index) => <ToDoListItem key={index} {...todo} />)
  }

  return (
    <div>
      <table>
        <ToDoListHeader />
        <tbody>
          {/* {this.renderItems()} */}
        </tbody>
      </table>
    </div>
  );
}

当我运行时，我试图映射结果对象document.getElementsByTagName。我意识到我无法映射对象，只能映射数组，但我不知道如何将其转换为对象以使其可迭代。

我的代码如下所示：

const [h2, setH2] = useState([]);

const getH2 = () => {
setH2(document.getElementsByTagName("h2"));
console.log(h2)
  }

这给了我以下结果：

尝试通过 h2 进行映射会返回错误：

TypeError: h2.map is not a function

我也尝试过h2.HTMLCollection.map()，但它引发了同样的错误。

如何映射 的结果docuemnt.getElementsByTagName？我尝试将对象转换为数组，但到目前为止未成功。

我正在尝试制作打字稿 + 反应文件输入组件。但是，我收到打字稿错误“对象可能为空”。我用谷歌搜索但找不到这个问题的解决方案。如何在不禁用打字稿空检查的情况下解决此问题。

我在 e.target.files[0] 上遇到错误！

这是下面的代码

import React from 'react';


    export default function ImageUpload() {
      const [selectedFile, setSelectedFile] = React.useState<File | string>('fileurl');
      const [imagePreviewUrl, setImagePreviewUrl] = React.useState<string | undefined | ArrayBuffer | null>();

      const fileChangedHandler = (e : React.ChangeEvent<HTMLInputElement>) => {
        setSelectedFile(e.target.files[0]!);

        const reader = new FileReader();

        reader.onloadend = () => {
          setImagePreviewUrl(reader.result);
        };

        reader.readAsDataURL(e.target.files[0]!);
      };

      const submit = () => {
        const fd = new FormData();

        fd.append('file', selectedFile);
      };

      let imagePreview = (<div className="previewText image-container">Please select an Image …

我对 import React 语句感到困惑。我知道如果我们需要使用 JSX，我们需要从 react 包中导入 React。

import { Count } from "./components/Count";

// import React, { useState } from "react";
function App() {
  const visiable = true;
  return (
    <div>
      <Count visiable={visiable} />
      {/* <button
        onClick={() => {
 
        }}
      >
        Switch
      </button> */}
    </div>
  );
}

export default App;

在上面的代码示例中，返回的数据不是JSX吗？我在 return 语句中有 div、button 和 Counter 组件。如果我理解正确，这些是 JSX。

但是我没有在文件中导入 React。但它仍然编译成功。可能有人帮助我理解这一点。谢谢