Удалить DOM в response.js,

Question

Как удалить элемент при нажатии пользователем x? передать идентификатор родительскому и использовать filter()? В jquery я могу просто использовать remove(), и это все. Очень новое, чтобы реагировать, нужно руководство.

import React from 'react'; 
 

 
const RenderItem = (props) => { 
 
    return(
 
     <ul id="todo"> 
 
     {props.items.map((item,i) => 
 
     <li className='list-group-item' data-id={item.id} key={i}>{item.name} 
 
     <button className="btn btn-sm btn-primary onClick={}">X</button> 
 
     </li> 
 
    )} 
 
     </ul> 
 
    ) 
 
}; 
 

 
const TodoItems = React.createClass({ 
 
    getInitialState() { 
 
    return { 
 
     items: [ 
 
     {id:1,name:"Gym"}, 
 
     {id:2,name:"Jump"}, 
 
     {id:3,name:"Racing"} 
 
     ], 
 
     editing: false 
 
    } 
 
    }, 
 
    edit(){ 
 
    this.setState({editing: true}) 
 
    }, 
 
    save(){ 
 
    this.setState({editing: false}) 
 
    }, 
 
    remove(id){ 
 
    //return this.items.filter((item,i) => item.id !== id) 
 
    } 
 
    render(){ 
 
    return(
 
     <RenderItem items={this.state.items} /> 
 
    ) 
 
    } 
 
}) 
 

 

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

<div id="container"> 
 
</div> 
 

 

 
<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>

Это мой код на скрипке https://jsfiddle.net/3mn105sj/, я не знаю, почему я не использовал реагировать здесь.

Answer 1

Проверьте скрипку:

https://jsfiddle.net/zp5oqnsh/1/

Пропустите remove() как реквизит и назовите remove() onClick с идентификатором и применить фильтр.

Надеюсь, это поможет!

Answer 2

Если вы создаете компонент без гражданства и прохождения реквизита в качестве аргумента, вы не можете использовать '' this.props

const RenderItem = (props) => { 
    return(
     <ul id="todo"> 
     {props.items.map((item,i) => 
      <li className='list-group-item' data-id={item.id} key={i}> 
       {item.name} 
       <button 
        className="btn btn-sm btn-primary" 
        onClick={() => props.remove(item.id}> 
        X 
       </button> 
      </li> 
    )} 
     </ul> 
)}; 

Answer 3

вам нужно использовать реакцию-dom, например;

import { unmountComponentAtNode } from 'react-dom'; 

onDismiss(node) { 
    unmountComponentAtNode(node); 
    document.body.removeChild(node); 
}