Question

我需要使用React.js在我的数据列表中添加索引值。我的代码如下。

Itemlist.js：

import React, { Component } from "react";

class TodoItems extends Component {
  constructor(props, context) {
    super(props, context);
    this.createTasks = this.createTasks.bind(this);

  }
  edit(key){
    this.props.edit(key);
  }
  delete(key){
    this.props.delete(key);
  }
  createTasks(item) {
    return <li key={item._id}>{item.name}<a href="#" className="button bg_green" onClick={()=>this.edit(item._id)}>Edit</a><a href="#" className="button bg_red" onClick={()=>this.delete(item._id)}>Delete</a></li>
  }

  render() {
    var todoEntries = this.props.entries;
    var listItems = todoEntries.map(this.createTasks);

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

export default TodoItems;

Todolist.js：

import React, { Component } from "react";
import TodoItems from "./TodoItems";
import "./TodoList.css";
import ItemService from './ItemService';
import axios from 'axios';

class TodoList extends Component {
  constructor(props, context){
    super(props, context);
    this.state={
      items:[]
    }
    this.addItem=this.addItem.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
    this.editItem = this.editItem.bind(this);
    this.ItemService = new ItemService();
  }
  componentDidMount(){
    axios.get('http://localhost:8888/item')
    .then(response => {
      this.setState({ items: response.data });
    })
    .catch(function (error) {
      console.log(error);
    })
  }
  addItem(e){
    e.preventDefault();
    if(this.state.editKey){
      this.saveEditedText();
      return;
    }
    var itemArray = this.state.items;
    if (this.inputElement.value !== '') {
      itemArray.unshift({
        text:this.inputElement.value,
        key:Date.now()
      })
      this.setState({
        items:itemArray
      })
      //console.log('items',this.state);
      this.ItemService.sendData(this.inputElement.value);
      this.divRef.insertAdjacentHTML("beforeend", '<p className="textcolor">'+this.inputElement.value+' has added successfully</p>');
      this.inputElement.value='';
      setTimeout( () => {
          this.divRef.querySelector(':last-child').remove();
          window.location.reload();
      }, 3000);
    }
  }
  saveEditedText(){
    let value = this.inputElement.value;
    this.setState(prevState => ({
      items: prevState.items.map(el => {
        if(el.key == prevState.editKey)
          return Object.assign({}, el, {text: value});
         return el;
      }),
      editKey: ''
    }));
    this.divRef.insertAdjacentHTML("beforeend", '<p className="textcolor">'+this.inputElement.value+' has updated successfully</p>');
    this.inputElement.value='';
    setTimeout( () => {
        this.divRef.querySelector(':last-child').remove();
    }, 3000);
  }
  render() {
    return (
      <div className="todoListMain">
        <div className="header" id="parentDiv">
          <div className="pageHeading" dangerouslySetInnerHTML={{ __html: "Todo Demo Application" }}></div>
          <div className="wrapper">
            <div ref={divEl => {
            this.divRef = divEl;
          }}></div>
            <form onSubmit={this.addItem}>
              <input ref={(a)=>this.inputElement=a} placeholder="enter task">
              </input>
              <button type="submit">{this.state.editKey? "Update": "Add"}</button>
            </form>
            <TodoItems entries={this.state.items} delete={this.deleteItem} edit={this.editItem}/>
          </div>
        </div>
      </div>
    );
  }
}

export default TodoList;

在将数据添加到db之后，添加的数据显示在列表中。在这里，我需要显示每行的索引值，意思是1 - item1，就像这样。

Answer 1

您可以通过以下方式执行此操作：

class TodoItems extends Component {
    constructor(props, context) {
        super(props, context);
        this.createTasks = this.createTasks.bind(this);
    }
    edit(key){
        this.props.edit(key);
    }
    delete(key){
        this.props.delete(key);
    }

    render() {
        var todoEntries = this.props.entries;
        return (
            <ul className="theList">
                {todoEntries.map(this.createTasks, this)}
            </ul>
        );
    }

    createTasks(item, index) {
        return (
            <li key={item._id}>
                {index} - {item.name}
                <a href="#" className="button bg_green" onClick={()=>this.edit(item._id)}>Edit</a><a href="#" className="button bg_red" onClick={()=>this.delete(item._id)}>Delete</a>
            </li>
        )
    }
};

Answer 2

如果您要在ItemList组件中显示索引map有一个重载，它具有参数索引，表示正在处理的数组中元素的当前索引。

See more in docs

所以make createTasks(item, index){ }然后你就可以访问元素的索引了。

如何使用React.js在列表中添加索引值？

2 个答案: