반응식 필터가있는 테이블을 만들지 못했습니다.

Question

필터는 작동하지만 간단히 es6 필터를 사용할 수는 있지만 문제는 원래 상태로 상태를 다시 설정하는 방법을 모르는 것입니다.

일반적으로 데이터 소스는 API 호출이지만 사용자가 필터 입력에서 값을 삭제할 때 API 호출을 피할 수 있습니까?

const data = [ 
    { 
    Id: "1", 
    FirstName: "Luke", 
    LastName: "Skywalker" 
    }, 
    { 
    Id: "2", 
    FirstName: "Darth", 
    LastName: "Vader" 
    }, 
    { 
    Id: "3", 
    FirstName: "Leia", 
    LastName: "Organa" 
    }, 
    { 
    Id: "4", 
    FirstName: "Owen", 
    LastName: "Lars" 
    } 
]; 


class App extends React.Component { 

    constructor() { 
    super() 
    this.state = { 
     data: data 
    } 
    } 

    filterId(e) { 
    const Id = e.target.value 
    if (Id) { 
     this.setState({ 
     data: this.state.data.filter(v => v.Id === Id), 
     }) 
    } else { 
     this.setState({ 
     data 
     }) 
    } 
    } 

    render() { 
    return (
     <div style={styles}> 
     <table> 
      <th>Id <input type="number" onChange={e => this.filterId(e)} /></th> 
      <th>Name<input /></th> 
      {this.state.data.map((o, i) => { 
      return (
       <tr> 
       <td>{o.Id}</td> 
       <td>{o.FirstName}</td> 
       </tr> 
      ) 
      })} 
     </table> 
     </div> 
    ); 
    } 
} 

https://codesandbox.io/s/oo22451v25

Answer 1

님께 저장소 여과 분리 변수 데이터 또는 어느 this.state.data.filter(v => v.Id === this.state.Id).map(...) 같은 render 함수에 동적 데이터 필터링을 수행.

Answer 2

할 수있는 일이 몇 가지 있지만 상태에 저장된 원본 데이터를 변경하지 말고 원본 데이터가 필터링 될 때 데이터를 보유하는 새 상태 속성을 추가하는 것이 좋습니다.

그런 다음이 새 상태 개체를 변수에 할당하여이 방법으로 출력 할 수 있습니다.

그것은 다음과 같이 somethiing 볼 수 있었다 :

const data = [ 
    { 
    id: '1', 
    firstName: 'Luke', 
    LastName: 'Skywalker', 
    }, 
    { 
    id: '2', 
    firstName: 'Darth', 
    LastName: 'Vader', 
    }, 
    { 
    id: '3', 
    firstName: 'Leia', 
    LastName: 'Organa', 
    }, 
    { 
    id: '4', 
    firstName: 'Owen', 
    LastName: 'Lars', 
    }, 
]; 

class App extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     data: data, 
     filteredData: null, 
    }; 

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

    filterId(e) { 
    const id = e.target.value; 
    if (id) { 
     this.setState({ 
     filteredData: this.state.data.filter(v => v.id === id), 
     }); 
    } else { 
     this.setState({ 
     filteredData: null, 
     }); 
    } 
    } 

    render() { 
    const dataOutput = this.state.filteredData || this.state.data; 
    return (
     <div> 
     <table> 
      <th> 
      id <input type="number" onChange={e => this.filterId(e)} /> 
      </th> 
      <th> 
      Name<input /> 
      </th> 
      {dataOutput.map((o, i) => { 
      return (
       <tr key={o.id}> 
       <td>{o.id}</td> 
       <td>{o.firstName}</td> 
       </tr> 
      ); 
      })} 
     </table> 
     </div> 
    ); 
    } 
} 

아, 그리고 한 가지 더 : 사용 CamelCase를. 처음에 대문자는 클래스를 선언 할 때만 사용해야합니다.

Answer 3

처음으로 : 유용성을 위해 includes()을 사용하여 필터링하려고합니다. 그렇지 않으면 100 % 일치 할 때까지 사물이 일치하지 않습니다. 한 자릿수보다 긴 필드를 다루기 시작하면 이것이 중요합니다.

두 번째로 : render() 메서드를 통한 필터링을 사용하면보다 안전하게 검색 할 수 있습니다. 즉, this.state.data은 원시 상태로 유지되므로 다시 필터링 할 수 있습니다.

실용적인 예는 아래를 참조하십시오.

// Data. 
 
const data = [ 
 
    { 
 
    Id: "1", 
 
    FirstName: "Luke", 
 
    LastName: "Skywalker" 
 
    }, 
 
    { 
 
    Id: "2", 
 
    FirstName: "Darth", 
 
    LastName: "Vader" 
 
    }, 
 
    { 
 
    Id: "3", 
 
    FirstName: "Leia", 
 
    LastName: "Organa" 
 
    }, 
 
    { 
 
    Id: "4", 
 
    FirstName: "Owen", 
 
    LastName: "Lars" 
 
    } 
 
] 
 

 
// Filter. 
 
class Filter extends React.Component { 
 

 
    // Constructor. 
 
    constructor(props) { 
 
    super(props) 
 
    this.state = {data, query: ''} 
 
    } 
 

 
    // Render. 
 
    render() { 
 
    return (
 
     <div> 
 
     <table> 
 

 
      <tr> 
 
      <input placeholder="Query" type="number" value={this.state.query} onChange={event => this.setState({query: event.target.value})} /> 
 
      </tr> 
 

 
      <th>Id</th> 
 
      <th>Name</th> 
 

 
      {this.state.data.filter((point) => point.Id.includes(this.state.query)).map((o, i) => { 
 
      return (
 
       <tr> 
 
       <td>{o.Id}</td> 
 
       <td>{o.FirstName}</td> 
 
       </tr> 
 
      ) 
 
      })} 
 

 
     </table> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 

 
ReactDOM.render(<Filter/>, document.querySelector('#root'))

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