时间戳

首页 > 解决方案 > 我无法在按钮单击时删除 CRUD 应用程序中的组件

reactjs - 我无法在按钮单击时删除 CRUD 应用程序中的组件

问题描述

试图在按钮单击时删除组件

我已向组件添加了唯一 ID，但我无法访问它

这是我的主要父组件，我试图在单击删除按钮时删除 Person 组件

class MyFriends extends Component{

  state = {
    persons: [],
  }

   async componentDidMount( ){
     let response = await axios(`https://randomuser.me/api/?results=1`)
     this.setState(prevState => ({
       persons: [...prevState.persons, ...response.data.results]
     }))
  }

   update = async () => {
    const response = await axios(`https://randomuser.me/api/?results=1`)

    this.setState(prevState => ({
      persons: [...prevState.persons, ...response.data.results]
    }))

  }


  handleDelete = (e) => {
    const test = this.state.persons.splice(-1)
    let oare = this.state.persons.filter( i => i !== test)
    this.setState({
      persons: oare
    })
  }

  updatePerson = (state, first, last, age, email, numar, pic, nat) => {
    const persoana_noua = {
      name: {first: first, last: last},
      dob: {age:age},
      email: email,
      login: {sha1: numar},
      picture: {large:pic},
      nat: nat,
    }

    const proba = this.state.persons
    this.setState(prevState => ({
      persons: [ ...prevState.persons, persoana_noua]
    }))

  }

  remove = (e) => {
    e.persist();
    e.target.value = 1
    // this.setState(prevState => ({
    //   persons: [...this.state.persons.filter(i => i.target.id.value !== test)]
    // }))

     console.log(e.target.id.value)
  }




  render(){

    const test = this.state.persons.map( i =>
      <Person  data={this.state} remove={this.remove} test={this.just_testing} consoleLog={this.updatePerson} key={i.login.sha1} id={Math.random()} first_name={i.name.first} last_name={i.name.last} nat={i.nat}
      picture={i.picture.large} email={i.email} age={i.dob.age}
      />
    )
    return(

      <div className='MyFriends'onClick={this.checkIt} >
      {test}
      <button style={{fontSize: '2em', border: '1px solid green'}} onClick={this.update}>add new friend</button>
      <button style={{fontSize: '2em', border: '1px solid green'}} onClick={this.handleDelete}>delete
      last added friend
      </button>
      <button onClick={this.handleChange}>test</button>
      </div>
    )
  }


}


export default MyFriends;

这是我要删除的子组件，它具有唯一的 id 和 Key，但我无法访问它，在状态下使用过滤器


class Person extends Component {
    state={
      modifica : false,
    }

    handleToggle = (e) => {
      this.setState({
        modifica : !this.state.modifica
      })

    }
    handleSubmit = (e) => {

      const first_name  = document.querySelector('.first_name input').value;
      const last_name = document.querySelector('.last_name input').value;
      const age = document.querySelector('.age input').value;
      const email = document.querySelector('.email input').value;
      const numar = Math.random();
      const pic = this.props.picture;
      const nat = this.props.nat;
      e.preventDefault();
      this.props.consoleLog(this.props.data, first_name, last_name, age, email, numar, pic, nat);
      const form = document.querySelector('form')

      this.setState(prevState => ({
        modifica: false,
        persons: [this.props.data]
      }))
      //this.props.test()
    }




    render(props){

      if(this.state.modifica){
        let individ = {}
       individ =
        <div className='Person'>
          <form  name= 'person' onSubmit={this.handleSubmit}>
            <h2 className='first_name'>First Name: <input  name = 'person' type='text'/></h2>
            <h2 className='last_name'>Last Name: <input type='text' /></h2>
            <h3 className='age'>Age: <input type='number' /></h3>
            <img className='flag' src={`https://www.countryflags.io/${this.props.nat}/flat/64.png`}/>
            <img className='pic' src={this.props.picture} />
            <h3 className='email'>email:<input type='text' /></h3>
            <button >Save</button>

          </form>

        </div>
        return individ
      }else{
      const individ =
          <div className='Person'>
            <h2 >First Name: {this.props.first_name} </h2><br/>
            <h2>Last Name: {this.props.last_name}</h2>
            <h3> Age : {this.props.age}</h3>
            <img className='flag' src={`https://www.countryflags.io/${this.props.nat}/flat/64.png`}/>
            <img className='pic' src={this.props.picture} />
            <h3>email: {this.props.email}</h3>
            <button onClick={this.handleToggle}>edit</button>
            <button  onClick={this.props.remove}>remove</button>
          </div>

          return individ
        }
    }
  }
export default Person;

标签： reactjs

解决方案

在 kiranvj 的帮助下，我找到了解决方案（再次感谢 kiranvj），所以首先我们需要选择按下的“删除”按钮所属的正确组件，然后应用过滤方法并将所有现有组件与选定的组件进行比较，这将返回一个没有我们按下“删除”按钮的特定组件的数组，并将返回的数组应用到 setState。这是代码：

  remove = (index) => {
  let newPersonList = this.state.persons.splice(index, 1); // the item from array
  const proba = this.state.persons.filter(i => i !== newPersonList)
  this.setState({
    persons: proba
  })
  }

我仍在努力理解如何在 react.js 中正确选择事件中的元素，所以如果你们有任何材料我可以阅读或观看以更好地理解这个概念，请链接

推荐阅读