反应未在工作代码中定义

此代码由我的同学编写，当我在他的网页上检查它时，它完美的工作。当我把它复制到我的网页全部是我所得到的那些错误反应未在工作代码中定义

TodoList的组件（项目制作清单，我从输入GWT）

class TodoList extends React.Component{ 

// render this component 
render() { 
var items = this.props.items.map(function(item, index) { 
    return (
    <li key={index}> 
     <span>{item} </span> 
     <img className="delete" 
      src="delete.jpg" 
      onClick={this.props.removeItem.bind(this, index)} /> 
    </li> 
); 
}.bind(this)); 
return (
    <ul>{items}</ul> 
) 
} 

}

TodoForm成分（使hadleSubmit为形式NAD形式本身）

class TodoForm extends React.Component{ 
// init component state 
state = { 
    item: "" 
} 
// add a new item -> call parent 
handleSubmit = (e) => { 
    // prevent normal submit event 
    e.preventDefault(); 
    // call parent to add a new item 
    this.props.onFormSubmit(this.state.item); 
    // remove new typed item from text input 
    e.target.children[0].value = ""; 
    // focus text input 
    e.target.children[0].focus(); 

} 

// item value is changed 
onChange = (e) => { 
    this.setState({item: e.target.value}); 
} 

// render component 
render(){ 
    return (
     <form onSubmit={this.handleSubmit}> 
     <input type="text" onChange={this.onChange} /> 
     <input type="submit" value="Add" /> 
     </form> 
    ); 
} 

}

应用组分（书面方式添加，删除项目）

class App extends React.Component { 

// init component state 
state = { 
    items: [] 
} 

// add a new item 
addItem = (newItem) => { 
    // returns a new list with a new item 
    let newArr = this.state.items.concat(newItem); 
    // render again 
    this.setState({items: newArr}); 
} 

// remove item 
removeItem = (index) => { 

    // remove from items array 
    let newArr = this.state.items; 
    newArr.splice(index, 1); 
    // render again 
    this.setState({items: newArr}); 
} 

// render component 
render(){ 
    return (
     <div> 
      <TodoForm onFormSubmit={this.addItem} /> 
      <TodoList items={this.state.items} removeItem={this.removeItem} /> 
     </div> 
    ) 
} 

} 

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

和HTML的（这是我的老师给他告诉我，这不应该被改变）

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Todo Example with React</title> 
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 
    <link href="app.css" rel="stylesheet"> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script> 
</head> 
<body> 
    <div id="root"></div> 
    <script type="text/babel" src="app.js"></script> 
</body>

来源

2017-10-13 Seiggailion

那么，你可以在日志中看到React文件由于某种原因无法加载。 –

提示：尝试打开此链接[https://unpkg.com/[email protected]/dist/react.js](https://unpkg.com/[email protected]/dist/react.js） – dfsq

所以你可以告诉你的老师，反应的URL是错误的。 –

-1

您使用的不是在访问的反应任何部分的链接为您提供反应环境并运行您的代码。如果您创建使用

npm install -g create-react-app 
create-react-app app_name 
npm start

添加您的反应元件插入到应用程序，并轻松地运行您的应用程序的反应这是对你更好。

来源

2017-10-13 19:39:14

或者，他可以简单地修复他加载React的URL。 – Amy

但是，如果他将使用适当的反应环境来工作，他将很容易编码。他甚至可以为此添加其他库。这是关于我遵循的最佳做法。 –

比修正打字错误更容易？好的。 – Amy

反应未在工作代码中定义

回答

相关问题