Question

我正在尝试做一个待办事项列表，但我的问题是使用splice来删除e.target.item特定的。使用Angular 5更容易。所以任何人都可以帮助我解决这个问题，谢谢。

import React, { Component } from 'react';

// Router
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
        items : [],
        userInput: ''
    };
  }

  changeUserInput(input) {
    this.setState({
      userInput: input
    });
  }
  addToList(input){
    let listArray = this.state.items;
    listArray.push(input);

    this.setState({
      items: listArray,
      userInput: ''
    })
  }

  deleteTodo(index){
    items : [];
    items.splice(index, 1);
    this.setState({items});
  } 

  // VIEW
  render() {


    return (
      <Router> 
        <div className="App">  

          {/* TODO LIST   */}
          <input
            type="text"
            onChange={
              (e)=>this.changeUserInput(e.target.value)
            }
            value={this.state.userInput}   
          />
          <button 
            onClick={
              ()=> this.addToList(this.state.userInput)
            }>add
          </button>
          <button
            onClick={
              (index)=> this.splice(this.state.userInput, [index, 1])
            }>remove
          </button>  

          <ul>
            {
              this.state.items
                .map( 
                  (val, index)=> 
                    <li key={index} 
                      onClick={this.deleteTodo.bind(this.index)}
                    >{val}</li>
                )  
            }
          </ul>                    

        </div>
      </Router>
    );
  }
}

export default App;

Answer 1

在environment.plugins.prepend('Provide', new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) )函数中，您遇到语法错误，您必须编写

deleteTodo

TODO反应不起作用

1 个答案: