Question

我正在尝试通过ReactJS创建一个todoList。我想通过它的id删除一个项目，但是当我在console.log（id）时，它返回undefined。这是我的代码

App.js：

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

import Header from './Components/header';
import InputTodo from './Components/todoInput';

class App extends Component {
  constructor(props){
    super(props);
    this.state={
      todos:[
        {id:0,text:'Make dinner'},
        {id:1,text:'Fold the laundary'},
        {id:2,text:'Do homework'}
      ]
    }
  }

  addHere=(text)=>{
    this.setState({
      todos:this.state.todos.concat([text])
    })
  }

  removeHere=(id)=>{
    console.log(id);
    // let arr=this.state.todos;
    // let index=arr.findIndex((x)=>x.id===id);
    // console.log(index);
  }
  render() {
    return (
      <div className='todo-wrapper'>
        <Header/>
        <InputTodo todoText='Type Here...' addTodo={this.addHere}/>
        <div>
          {this.state.todos.map((value,key)=>{
            return (
            <div className='row myList' key={key}>
            <p className='col-xs-10'> {value.text}-{value.id} </p>
            <button className='btn btn-danger pull-right col-xs-2' onClick={this.removeHere(value.id)}>Delete</button> 
            </div>
          )})}
        </div>
      </div>
    );
  }
}

export default App;

以下是InputTodo.js：

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

export default class InputTodo extends Component{
    constructor(props){
        super(props);
        this.state={
            todoInput:{
                id:2,
                text:''
            }
        }
    }


    handleSubmit=(e)=>{
        if(this.refs.title.value===''){
            alert('You must input something');
        }
        else{
            this.state.todoInput={
                id:this.state.todoInput.id+1,
                text:this.refs.title.value
            };
            this.setState(this.state);
            this.props.addTodo(this.state.todoInput);
            this.refs.title.value='';
        }
        e.preventDefault();

    }
    render(){
        return(
            <form className='input-group' onSubmit={this.handleSubmit}>
                <input type='text' ref="title" className='form-control'placeholder={this.props.todoText}/>
                <span className='input-group-btn'>
                <input type='submit' value='Submit' className='btn btn-primary'  />
                </span>
            </form>
        );
    }
}

Answer 1

虽然FuzzyTree的答案可行，但更简洁的方法是将待办事项的JSX提取到自己的组件中。每次调用button onClick函数时，这样做的好处是不会为App的{{1}}道具创建新函数

组件可能如下所示：

render

将映射的参数传递给ReactJS中的函数

1 个答案: