Question

这段代码是我的同学写的，当我在他的网页上查看它时，它完全有效。当我把它复制到我的网页时，我得到的就是那些错误

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组件（为表单nad形成本身的hadleSubmit）

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/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel" src="app.js"></script>
</body>

Answer 1

您正在使用的链接不会访问任何反应部分，以便为您提供响应环境并运行您的代码。如果您使用

创建反应应用程序，对您来说会更好

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

然后将您的反应组件添加到该应用中并轻松运行您的应用。

React未在工作代码中定义

1 个答案: