배열을 필터링하여 필터링

Question

나는 To-Do 응용 프로그램을 만들고 있습니다. 나는 어느 시점에 갇혀있다.
배열의 항목을 매핑하여 정렬되지 않은 목록에 표시하고 있습니다. 필터 함수를 사용하여 삭제 된 항목을 배열에서 제거하려고합니다.

내 코드의 문제가 어딘가에 있는데, 이벤트 개체를 전달하지만 목록 항목 대신 단추를 가리키고 있다고 가정합니다.

어떻게 반응합니까? 내 코드는 아래에 첨부되어 있습니다.
또한 항목을 제출 한 후 입력 필드를 지우는 것이 좋습니다. 이 라인에서

import React, { Component } from 'react'; 

class ToDoList extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {list: [], items: ''}; 
    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    this.handleRemove = this.handleRemove.bind(this); 
    } 

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

    handleSubmit(event) { 
    this.setState({ list: [...this.state.list, this.state.items]}) 
    event.preventDefault(); 
    } 

    handleRemove(event) { 
    const filteredArray = this.state.list.filter(item => item !== event.target.value) 
    this.setState({list: filteredArray}); 
    console.log(event.target); 
    } 

    render() { 
    return (
    <div> 
     <form onSubmit={this.handleSubmit}> 
     <label> 
      <input 
      type="text" 
      value={this.state.value} 
      onChange={this.handleChange} /> 
     </label> 
     <input 
      onClick={this.handleSubmit} 
      type="submit" 
      value="Submit" /> 
     </form> 
     <ul> 
     {this.state.list.map((i, index) => (
      <li key={index+1}> 
       {i} 
       <button 
       onClick={this.handleRemove}> 
        X 
       </button> 
      </li> 
     ))} 
     </ul> 
     <p>Remaining: {this.state.list.length}</p> 
     </div> 
    ); 
    } 
} 

export default ToDoList; 

Answer 1

나는 당신의 핸들러에 전달 무엇을 변경하기 위해 .bind에 옵션 추가 인수를 사용하는 것이 좋습니다 것입니다.

 <ul> 
     {this.state.list.map((i, index) => (
      <li key={index+1}>{i}<button onClick={this.handleRemove.bind(this, index)}>X</button></li> 
     ))} 
     </ul> 

을 그리고 단지 지정된 요소를 제거하려면 다음 핸들러를 업데이트 : 요소의 인덱스를 전달하는지도 방법에서

전화 .bind(this. index)는 핸들러에 제거 할

handleRemove(index) { 
    const filteredArray = this.state.list.filter((_, i) => i !== index); 
    this.setState({ 
     list: filteredArray 
    }); 
    } 

을 두 번째 질문에 관해서는 먼저 입력을 수정하여 그 값이 실제로 상태에 의해 제어되도록하십시오. value={this.state.value}을 value={this.state.items}으로 변경하십시오.

제출시

<input type="text" value={this.state.items} onChange={this.handleChange} /> 

그리고 단순히 명확 this.state.items은 : 그것은,하지만 덕분에 작동하지 않는 것 같다

handleSubmit(event) { 
    this.setState({ 
     list: [...this.state.list, this.state.items], 
     items: '' 
    }) 
    event.preventDefault(); 
    } 

Answer 2

확인 : handleRemove 내부

<li key={index+1}>{i}<button onClick={this.handleRemove}>X</button></li> 

, 버튼에 명령 event.target 점. 버튼에는 value 속성이 없습니다. 그래서, 당신은 부모에게 가서는 내용의 얻을 필요가 :

// childNodes[0] is a TextNode, so, to get it's content use data pop 
const toRemove = event.target.parentNode.childNodes[0].data.trim(); 
const filteredArray = this.state.list.filter(item => item !== toRemove); 

또 다른 옵션은 span처럼 요소의 항목을 포장입니다 :

<li key={index+1}><span>{i}</span><button onClick={this.handleRemove}>X</button></li> 

그리고 제거에이 항목을 얻을 수를 값 :

const toRemove = event.target.parentNode.children[0].textContent.trim(); 
const filteredArray = this.state.list.filter(item => item !== 
event.target.value)