ReactJS에서 여러 클래스를 가질 때 항목을 삭제하는 방법은 무엇입니까?

Question

JSFiddle : http://jsfiddle.net/jwm6k66c/315/하지만 다른 점은 클래스 종속성이있는 더 복잡한 아키텍처에서 항목 삭제를 구현하려고한다는 것입니다.

또한 항목 작성이 완벽하게 작동한다고 언급 할 가치가 있지만 항목 삭제는 다른 방식으로 구현해야합니다 (버튼으로 모든 항목을 삭제하고 싶지 않기 때문에 단추는 해당 항목 만 삭제해야 함). 또한 각각의 클래스에서 propType으로 deleteItem: React.PropTypes.func.isRequired을 가지고 있지만 올바른지 확실하지 않습니다.

onDelete(item){ 
    e.preventDefault(); 
    deleteItem(item); 
} 
render(){ 
    const {item} = this.props; 
    return(
     <li> 
      <a onClick={this.onClick.bind(this)}> 
       {item.name} 
      </a><br/> 
      <a onClick={this.onClick.bind(this)}> 
       {item.price} 
      </a><br/> 
      <a onClick={this.onClick.bind(this)}> 
       {item.donation} 
      </a><br/> 
      <a onClick={this.onClick.bind(this)}> 
       {item.image} 
      </a><br/> 
      <form onSubmit = {this.onDelete.bind(this)}> 
       <input type = "submit" value = "Eliminar"/> 
      </form> 
     </li> 
    ) 
} 

그런 다음 우리가 App.jsx의 방법이 있습니다 :

그래서 처음 내 Item.jsx 클래스의 렌더링 내가 그들의 '삭제'(Eliminar) 버튼을 포함한 '항목을'렌더링 onDelte 방법을 가지고

deleteItem(item){ 
    const newState = this.state.items; 
    if (newState.indexOf(item) > -1) { 
    newState.splice(newState.indexOf(item), 1); 
    this.setState({items: newState}) 
    } 

    render(){ 
return(
    <ItemSection 
    items = {this.state.items} 
    addItem = {this.addItem.bind(this)} 
    setItem = {this.setItem.bind(this)} 
    deleteItem = {this.deleteItem.bind(this)} 
    /> 
) 

그런 다음 ItemForm과 ItemList는 ItemSection에서 가져온 클래스입니다. ItemSection은 deleteItem을 포함한 모든 proptypes의 div를 렌더링합니다.

그리고 마지막으로 여기 ITEMLIST의 렌더링 방법입니다 :

render(){ 
    return(
     <ul>{ 
      this.props.items.map(itm =>{ 
       return <Item 
        item = {itm} 
        key = {itm.id} 
        setItem = {this.props.setItem} 
        deleteItem = {this.props.deleteItem} 
       /> 
      }) 
     }</ul> 
    ) 
} 

파일을 렌더링하는 것은 내가 캐치되지 않는 오류를 받고 있어요 (그것이 바로 내 개발자 콘솔에서 사라집니다 때문에 그것이 무엇인지 읽을 수 없습니다) 때의 일이 무엇 앱이 다시 시작됩니다.

Answer 1

양식의 onSubmit 메서드가 호출되면 먼저 양식이 이전 방식으로 제출됩니다.

<button onClick = {() => this.props.deleteItem(this.props.item}>Submit</button> 

당신이 만약 대신 자신 만의 방법을 정의하고 기본 동작을 방지, 나는 다음과 그냥 버튼을 사용하는 것이 좋습니다으로 (의 deleteItem에 전달하기 코드에서 첫 번째 인수를 이벤트가 아닌 항목입니다) 이 언급 된 바와 같이, 당신은 또한

onDelete(e, item) { 
    e.preventDefault(); 

    this.props.deleteItem(item): 
} 

이

<form onSubmit = {event => this.onDelete(event, item)}> 

와 onDelete 방법처럼 뭔가 양식 onSubmit을 변경할 수 있습니다 싶지 않아, const를 newState = this.st ate.items 단지 참조를 반환, 당신은 새 복사본

const newState = { ...this.state.items } 

Answer 2

나는 문제가 당신의 item.jsx에 deleteItem(item);와 아마 생각을 얻을 수있는 확산 연산자를 사용할 수 있습니다. this.props.deleteItem(item);라고해야합니다.

또한 동일한 방법으로 e.preventDefault()과 e도 수행하지 않습니다. 따라서 사용 방법에 e을 전달하십시오.

이 줄에 const newState = this.state.items; 인 경우 동일한 방법으로 돌연변이하는 동안 상수에 사용되는 const를 사용하는 것과 마찬가지로 돌연변이를 위해 새 배열을 반환하는 대신 상태에 대한 참조를 얻게됩니다. 나는 신선한 사본을 얻기 위해 let newState = this.state.items.slice();을하는 것이 좋습니다.

여기에서 newState.splice(newState.indexOf(item), 1);이면 메소드에서 두 번 사용하기 때문에 변수에 색인을 할당 할 수 있습니다.