reactjs의 구성 요소/요소 배열을 필터링하는 방법

Question

클릭하면 이벤트를 통해 버튼을 가져올 수 있습니다. 하지만 필터를 사용하면 해당 버튼이 제거되지 않습니다.

그래서 나는 생성자() 내 배열을 :

delete_me(e) 
{ 
    console.log(e.target); 
    this.buttons = this.buttons.filter((item) => item != e.target); 
    console.log(this.buttons); 
} 

그러나 this.buttons 여전히 두 요소가 있습니다

constructor() 
{ 
    super(); 
    this.options = [ 1, 2, 3, 4, 5]; 
    this.temp_option = []; 
    this.delete_me = this.delete_me.bind(this); 
    this.buttons = [<button key="0" onClick={this.delete_me}/>,<button key="1" onClick={this.delete_me}/>]; 
    this.state = { buttons: this.buttons }; 
} 

다음 내가 기능을 가지고있다.

나는 그것을 삭제하는 다른 방법에 대해 생각하고 그것은 '키'를 사용하는 것이었지만 키 값을 얻는 것에 관해서는 아무것도 찾을 수 없다.

Answer 1

먼저, 당신은 당신의 콜백 함수의 범위에 this을 결합해야합니다. synthetic event에서 버튼을 렌더링하는 데 사용 된 반응 객체 인스턴스에 액세스하려면 private 변수 _targetInst을 사용하면됩니다.

class Buttons extends React.Component{ 

    constructor(props) { 
    super(props); 
    this.delete_me = this.delete_me.bind(this); 
     this.state = { 
     buttons : [<button key="0" onClick={this.delete_me}>0</button>,<button key="1" onClick={this.delete_me}>1</button>] 
    }; 
    } 

    delete_me(e){ 
    const buttons = this.state.buttons.filter((button) => button != e._targetInst._currentElement); 
    this.setState({ buttons }); 
    } 

    render() { 
    return <div>{this.state.buttons}</div>; 
    } 
}; 

ReactDOM.render(
    <Buttons />, 
    document.getElementById('container') 
); 

그러나, 언급 Chris로, 당신의 접근 방식은 반작용 패턴과 일치 많이하지, 당신은 (일반적으로 밑줄로라는 이름의) 개인 메서드 나 속성

Answer 2

현재 취하고있는 접근 방식은 실제로 "반응"하지 않습니다. dom을 직접 변경하는 대신 상태 변화에 대해 더 많이 생각해야합니다.

한 가지 방법은 다음과 같습니다

class App extends React.Component { 
    constructor(){ 
    super(); 
    this.state ={ 
     visibleButtons: [ 11, 22, 33, 44 ], 
     buttons: { 
     11: { 
      label: "Foo", 
     }, 
     22: { 
      label: "Bar" 
     }, 
     33: { 
      label: "Cow", 
     }, 
     44: { 
      label: "Pig" 
     },   
     }, 
    } 
    } 

    onDelete(deletedId) { 
    this.setState({ 
     visibleButtons: this.state.visibleButtons.filter(id => id !== deletedId) 
    }); 
    } 

    render() {           
    return (
     <div> 
     { this.state.visibleButtons.map(buttonId => (
      <button key={buttonId} onClick={() => this.onDelete(buttonId)}>{this.state.buttons[buttonId].label}</button> 
     )) } 
     </div> 
    ); 
    } 
} 

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

http://codepen.io/cjke/pen/RKwWwZ?editors=0010

---

편집

추가 및 제거 보여주는 예. 고유 ID가 매우 원시적이며, 적극적으로이 무엇인지를 확인하지 않습니다,하지만 당신은 요점 얻어야한다 : 모든

class App extends React.Component { 
    constructor(){ 
    super(); 
    this.onAdd = this.onAdd.bind(this); 
    this.onChange = this.onChange.bind(this); 

    this.state ={ 
     value: '', 
     uniqueId: 100, 
     visibleButtons: [ 11, 22, 33, 44 ], 
     buttons: { 
     11: { 
      label: "Foo", 
     }, 
     22: { 
      label: "Bar" 
     }, 
     33: { 
      label: "Cow", 
     }, 
     44: { 
      label: "Pig" 
     },   
     }, 
    } 
    } 

    onDelete(deletedId) { 
    this.setState({ 
     visibleButtons: this.state.visibleButtons.filter(id => id !== deletedId) 
    }); 
    } 

    onChange(e) { 
    this.setState({ value: e.target.value }); 
    } 

    onAdd(e) { 
    this.setState({ 
     uniqueId: this.state.uniqueId + 1, 
     value: '', 
     buttons: { 
     ...this.state.buttons, 
     [this.state.uniqueId]: { 
      label: this.state.value, 
     } 
     }, 
     visibleButtons: [...this.state.visibleButtons, this.state.uniqueId], 
    }); 
    } 

    render() {           
    return (
     <div> 
     <div> 
     { this.state.visibleButtons.map(buttonId => (
      <button key={buttonId} onClick={() => this.onDelete(buttonId)}>{this.state.buttons[buttonId].label}</button> 
     )) } 
     </div> 
     <br/> 
     <div> 
      <input onChange={this.onChange} value={this.state.value}/><button onClick={this.onAdd}>+</button> 
     </div> 
     </div> 
    ); 
    } 
} 

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