小编tom*_*hes的帖子

带有 React 的 TypeScript 中的以下代码输出以下错误。

类型“EventTarget”上不存在属性“value”。

import React, { Component } from 'react';

class InputForm extends React.Component<any ,any> {
  state = {
    userInput: ''
  };

  handleUserInput = (e: React.FormEvent<HTMLInputElement>): void => {
    this.setState({
      userInput: e.target.value
    });
  }

  // Working code from 42081549
  // Not relevant to this project
  update = (e: React.FormEvent<HTMLInputElement>): void => {
    this.props.login[e.currentTarget.name] = e.currentTarget.value
  }

  submitMessage = (e: React.FormEvent<HTMLFormElement>): void => {
    e.preventDefault();
    this.props.sendUserMessage(this.state.userInput)
  }

  render() {
    return (
      <form className="chat-input-form" onSubmit={this.submitMessage}>
        <input value={this.state.userInput} onChange={this.handleUserInput}/>
        <button …

很简单,如果我在ES6中有一个类,可以在其中使用箭头功能.

import React, { Component } from 'react';

export default class SearchForm extends Component {

  state = {
    searchText: ''
  }

  onSearchChange = e => {
    this.setState({ searchText: e.target.value });
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.onSearch(this.query.value);
    e.currentTarget.reset();
  }

  render() {
    return (
      <form className="search-form" onSubmit={this.handleSubmit} >
        <label className="is-hidden" htmlFor="search">Search</label>
        <input type="search"
               onChange={this.onSearchChange}
               name="search"
               ref={(input) => this.query = input}
               placeholder="Search..." />
        <button type="submit" id="submit" className="search-button">
          <i className="material-icons icn-search">search</i>
        </button>
      </form>
    );
  }
}

我问的原因是我的控制台出现错误,即使使用Babel,虽然看起来互联网上有很多资源说明你可以做到这一点(其中大部分是关于使用React进行开发).

这是巴贝尔应该做的事情,并最终会得到本地支持吗？

我得到的错误是意外=符号,就在parens之前.

编辑:我忘了提到,我希望这样做的原因是在Class的上下文中使用'this'关键字,如果我使用常规函数 - 对我的理解 …

我正在阅读TypeScript文档的这一部分，在“通用类型”部分下，以下两个声明是等效的：

代码样本1

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: <T>(arg: T) => T = identity;

代码样本2

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: {<T>(arg: T): T} = identity;

文档指出，由于以下原因，这是可能的。

我们还可以将泛型写为对象文字类型的调用签名

尽管有这句话，我仍在努力理解两者的等效性，是否有进一步的文档或说明“对象文字类型的调用签名”的含义。

对不起，我无法给出进一步的解释，但是我对两者的等效性完全是空白，对我来说第二种类型定义指出myIdentity应该是一个对象？

谢谢。

我正在尝试使用 React 和 React-router v4 来渲染一些元素。

这个想法是，该组件是来自网站的文章列表，每个路由使用不同的 API 密钥从不同的网站获取文章。

我使用单个组件来显示文章，并且对于每个路由，我想传递不同的 API 密钥。

我遇到的问题是每个路由都使用相同的 API 密钥，这是访问的第一个路由的密钥。

源代码如下：

var APIKeys = {
    BBCKey: 'https://newsapi.org/v1/articles?source=bbc-sport&sortBy=top&apiKey=foo',
    ESPNKey: 'https://newsapi.org/v1/articles?source=espn&sortBy=top&apiKey=foo',
    FourFourTwoKey: 'https://newsapi.org/v1/articles?source=four-four-two&sortBy=top&apiKey=foo'
}

let App = () => (
    <BrowserRouter>
      <div className="container">
      <header>
        <span className="icn-logo"><i className="material-icons">code</i></span>
        <ul className="main-nav">
          <li><NavLink exact to="/">Home</NavLink></li>
          <li><NavLink to="/BBCSport">BBC Sport</NavLink></li>
          <li><NavLink to="/FourFourTwo">FourFourTwo</NavLink></li>
          <li><NavLink to="/ESPN">ESPN</NavLink></li>
        </ul>
      </header>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/BBCSport" render={ () => <GetArticles APIKey={APIKeys.BBCKey} /> } />
        <Route path="/FourFourTwo" render={ () => <GetArticles APIKey={APIKeys.FourFourTwoKey} /> } /> …

我的理解是Babel Polyfill模拟完整的ES6环境,而babel-preset-env根据您需要支持的环境(浏览器)自动将ES6(及更高版本)编译为ES5.

我有几个问题:

• 这两个设计是为了彼此并排使用,还是相互替代？

• 如果它们被设计成彼此的替代品,是否有理由选择一个而不是另一个？还有一个表现更好吗？

• 当使用这些工具中的任何一个时,是否仍然需要使用额外的Babel插件,或者其中一个包含我需要编写符合规范的现代JavaScript的每个插件(仅限第4阶段提案,我认为需要插件才能使用第3阶段及以下？).

Say I have React component that renders a set of buttons,I store the information for the buttons in an object, with a label and a method to run when they are attached.

按钮不需要对任何变化做出反应，并且永远不会改变自己。

将这些按钮的信息存储在状态中是一种不好的做法吗？这些是我目前提出的解决方案。

1. 将按钮保存在状态

class Header extends Component {
  constructor() {
    super();
    this.state = {
      buttons: [
        {
          label: 'Save',
          method: this.save
        },
        {
          label: 'Edit',
          method: this.edit
        }
      ]
    }
  }

  // Class Methods
  // ...
  // End of Class Methods

  render() {
    <ButtonGroup buttons={this.state.buttons} />
  } …

我正在查看React文档,我遇到了这段代码.

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

是否有一个特定的名称,他们在这里做什么,他们propTypes在课堂上创建一个对象？

这只是一个React的东西,还是可以在任何ES6代码中完成？

为什么我们不能只propTypes在类本身内设置一个变量,为什么它必须来到类外？