Question

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

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>     
    }
}

文本区域/输入组件

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不会修改原始数组，但会返回带有修改后值的新数组。您需要将其分配给新变量或使用其他方法删除该值。

let newArray = postDelete.slice(index, index + 1);
this.setState({
  userNames: newArray
})

实际上，由于slice不会改变数组，因此您可以简化为：

this.setState((prevState) => ({
  userNames: prevState.userNames.slice(index, index + 1)
)})

但是，要完成此特定任务，您应该使用其他方法，例如filter

this.setState((prevState) => ({
  userNames: prevState.userNames.filter((v,i) => i != index)
)})

这将遍历数组并过滤掉所有不符合条件的对象。第一个参数是当前值，第二个参数是索引。因此，我们只想保留与索引变量不匹配的值。

Answer 2

class App extends React.Component {
  state = {
    users: [
      {
        firstName: "Lionel",
        lastName: "Messi"
      },
      {
        firstName: "Cristiano",
        lastName: "Ronaldo"
      },
      {
        firstName: "Neymar",
        lastName: "Jr."
      },
      {
        firstName: "Zlatan",
        lastName: "Ibrahimovic"
      },
      {
        firstName: "Ricardo",
        lastName: "Kaka"
      }
    ]
  };

  updateUsers = (updatedUser, index) => {
    var users = [...this.state.users];
    users[index] = updatedUser;
    this.setState({
      users
    });
  };

  deleteUser = index => {
    var users = [...this.state.users];
    users.splice(index, 1);
    this.setState({
      users
    });
  };

  render() {
    return (
      <div>
        {this.state.users.map((user, index) => {
          return (
            <PlayerBox
              user={user}
              key={Math.random()}
              index={index}
              updateUsers={this.updateUsers}
              deleteUser={this.deleteUser}
            />
          );
        })}
        <h1> {JSON.stringify(this.state.users)} </h1>
      </div>
    );
  }
}

class PlayerBox extends React.Component {
  state = {
    editMode: false,
    firstName: "",
    lastName: ""
  };

  componentDidMount() {
    const { firstName, lastName } = this.props.user;
    this.setState({
      firstName,
      lastName
    });
  }

  updateParent = () => {
    const { index, updateUsers } = this.props;
    updateUsers(
      {
        firstName: this.state.firstName,
        lastName: this.state.lastName
      },
      index
    );
    this.setState({
      editMode: false
    });
  };

  deleteUser = () => {
    const { deleteUser, index } = this.props;
    this.setState({
      editMode: false
    });
    deleteUser(index);
  };

  render() {
    const { firstName, lastName } = this.props.user;
    return this.state.editMode ? (
      <div>
        <div>
          <input
            type="text"
            value={this.state.firstName}
            onChange={e =>
              this.setState({
                firstName: e.target.value
              })
            }
          />
          <input
            type="text"
            value={this.state.lastName}
            onChange={e =>
              this.setState({
                lastName: e.target.value
              })
            }
          />
          <button type="submit" onClick={this.updateParent}>
            Save
          </button>
          <button onClick={this.deleteUser}> Delete </button>
        </div>
      </div>
    ) : (
      <div
        onClick={() =>
          this.setState({
            editMode: true
          })
        }
      >
        {firstName} {lastName}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

点击React中的删除项

2 个答案: