删除React中的单击项

Question

我有一个包含3个名称的名称列表。单击任意1时，您可以编辑和保存。该值将更新到列表。现在，我可以添加多少个我想要的名字，但是我无法删除/删除任何名字。有人可以帮忙吗？

This is how it looks in the beginning

On clicking a name (the whole container) it looks like this

我能够将新名称重新添加到div like this

而且我可以根据需要添加任意数量，例如like this

现在，我希望能够单击十字图标并删除我想要的整个元素。它应该从页面上消失了。其他元素应从上到下占据其位置。删除/删除功能应该在输入和包含名称的div上。

名称组件（名称从此提取到下面的名称）

import Sukhdev from '../../../src/components/sukhdev';
import React from 'react';

export default { title: 'Sukhdev' };

const names = [{
    firstName: "Mahatma",
    lastName: "Gandhi"
}, {
    firstName: "Shivaji",
    lastName: "Maharaj"
}, {
    firstName: "Bhagat",
    lastName: "Singh"
},
]

export const sukhdev = () => {
    return(
    <Sukhdev names={names}/>
    ) 
}

父组件

import React, { Component } from 'react';
import FirstName from './firstName';
import LastName from './lastName';
import TextArea from './textArea'
import styles from './styles';


export default class Sukhdev extends Component {
  constructor(props) {
    super(props);
      const {names} = this.props;
      const updatedNames = names.map((name) => ({...name, ...{isEditable: false}})); 
      this.state = {
        userNames: updatedNames
      }
  }

 inputNamesHandler = (namesIndex) => {
    const updatedUserNameDetails = [...this.state.userNames];
    updatedUserNameDetails[namesIndex].isEditable = true;
    this.setState({userNames: updatedUserNameDetails})
  }

  saveButton = (inputValue, index) => {
    const {userNames} = this.state; 
    const newNames = [...userNames];
    newNames[index] = {...newNames[index], isEditable: false, firstName: inputValue, lastName: ''};
    this.setState({
      userNames: newNames
    })
  }

  addChild = () => {
    const createInputs = [...this.state.userNames];
    createInputs.push({firstName: '', lastName: '', isEditable: true});
    this.setState({
      userNames: createInputs
    })
  }

   ------> // This is where the changes need to be made
  deleteRow = (index) => {
    const postDelete = [...this.state.userNames];
    postDelete.slice(index, 1);
    this.setState({
      userNames: postDelete
    })
  }

  render() {
      return <div>
          <h1>Names</h1>
          <button onClick={this.addChild} style={styles.button}>Add New</button>
          <div>
              {this.state.userNames.map((nameDetails, index) => {
                  if(nameDetails.isEditable) {
                    return <div>
                      <TextArea clicked={(name) => this.saveButton(name, index)}/>
                      </div>;
                  } else {
                    return <div style={styles.namesContainer}>
                    <div onClick={() => this.inputNamesHandler(index)} style={styles.innerContainerComponent}>
                    <div style={styles.firstMargin}><FirstName firstName={nameDetails.firstName}></FirstName></div>
                    <div><LastName lastName={nameDetails.lastName}></LastName></div>
                    </div>
                    <img src={require('../../images/cancel.png')} style={styles.crossBtn} onClick={() => this.deleteRow(index)} />
                    </div>
                  }
              })}   
          </div> 
          </div>     
    }
}

Textarea /输入组件

import React, { Component } from "react";
import styles from './styles'

export default class TextArea extends Component {
    constructor(props) {
        super(props);
        this.state = {value:''}

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
    }

    render() {
        return (
            <div>
                <div style={styles.inputContainer}>
                <input type="text" style={styles.textField} value={this.state.value} onChange={this.handleChange}></input>
                <button type="submit" style={styles.saveButton} onClick={() => this.props.clicked(this.state.value)}>Save</button>
                <img src={require('../../images/cancel.png')} style={styles.crossBtn} />
                </div>
            </div>
        )

    }
}

名字和姓氏通过这种方式由父组件导入

import React, {Component} from 'react';

export default class FirstName extends Component {
    render() {
        return <div>{this.props.firstName}</div>
    }
}

姓氏也类似于上面给出的代码。

Answer 1

slice不会修改原始数组。您需要将其分配给新变量，或使用其他方法删除该值。

slice