Question

import React, { Component } from 'react';
import './App.css';

class App extends Component {
constructor(props) {
super(props);
this.state = {
  items: []
 }
}
addItem(e) {
  var itemArray = this.state.items;

itemArray.push({
  text: this._inputElement.value,
  key: Date.now()
});

this.setState({
  items: itemArray
});

e.preventDefault();
}
render() {
  return (
  <div className="main">
    <div className="header">
      <form onSubmit={this.addItem}>
        <input ref={(a) => this._inputElement = a}
        placeholder="enter your message"/>
        <button type="submit">add</button>
      </form>
    </div>
    <todoItems entries={this.state.items}></todoItems>
  </div>
);
}
}

class todoItems extends Component {
todoEntries = this.props.entries;

createTasks(item) {
 return <li key={item.key}>{item.text}</li>
}

listItems = this.todoEntries.map(this.createTasks);

render() {
  return(
    <ul className="theList">
      {this.listItems}
    </ul>
  );
 }
}

export default App;

我尝试制作＆＃39; todo＆＃39;在react.js中的应用，但它不起作用添加消息。它发生刷新和错误控制台消息： bundle.js：30031警告：标记上的未知道具entries。从元素中删除此道具。

我该如何解决？

Answer 1

React组件必须以大写字母开头，否则将无法识别。应该是

<TodoItems.../>

React.js - 添加按钮不起作用

1 个答案: