從函數到函數的傳遞索引

Question

我有一個項目列表，並在點擊刪除按鈕時，該項目將被刪除。我知道要做到這一點的步驟，但我被困在如何將密鑰傳遞給dlt_item作用域。

http://jsfiddle.net/3Ley7uac/1/

var App = React.createClass({ 
    getInitialState(){ 
    return { 
    items:[1,2,3] 
    } 
    }, 
    dlt_item(key){ 
    //how to get index/id here? 
    }, 
    renderItem(){ 
    return this.state.items.map((item,i)=> <li key={i}>{item} 
    &nbsp; 
    <button>Edit</button> 
    <button onClick={this.dlt_item}>Delete</button> 
    </li> 
    ) 
    }, 
    render(){ 
     return(
     <ul> 
     {this.renderItem()} 
     </ul> 
    ) 
    } 
}) 

Answer 1

您需要綁定this.dlt_item作爲

<button onClick={this.dlt_item.bind(this, i)}>Delete</button> 

，並在您dlt_item功能，您可以在此索引通過拼接你的狀態數組。

代碼

var App = React.createClass({ 
    getInitialState(){ 
    return { 
    items:[1,2,3] 
    } 
    }, 
    dlt_item(key){ 
    console.log(key); 
    this.state.items.splice(key, 1); 
    this.setState({items: this.state.items}); 
    //how to get index/id here and do setState 
    }, 
    renderItem(){ 
    return this.state.items.map((item,i)=> <li key={i}>{item} 
    &nbsp; 
    <button>Edit</button> 
    <button onClick={this.dlt_item.bind(this, i)}>Delete</button> 
    </li> 
    ) 
    }, 
    render(){ 
     return(
     <ul> 
     {this.renderItem()} 
     </ul> 
    ) 
    } 
}) 

React.render(<App />, document.getElementById('container')); 

JSFIDDLE

而是剪接的，你可以使用filter作爲

dlt_item(key){ 
    var items = this.state.items.filter(function(obj){ 
    return obj != (key + 1); 


    }); 
    console.log(items); 
    this.setState({items: items}); 
    //how to get index/id here and do setState 
    }, 

JSFIDDLE

Answer 2

使用.bind(this, yourKey)

在您的例子：

var App = React.createClass({ 
    getInitialState(){ 
    return { 
     items: [1, 2, 3] 
    } 
    }, 
    dlt_item(key){ 
    console.log(key); 
    }, 
    renderItem(){ 
    return this.state.items.map((item, i) => <li key={i}>{item} 
     <button>Edit</button> 
     <button onClick={this.dlt_item.bind(this, item)}>Delete</button> 
     </li> 
    ) 
    }, 
    render(){ 
    return (
     <ul> 
     {this.renderItem()} 
     </ul> 
    ) 
    } 
}); 

React.render(<App />, document.getElementById('container')); 

Answer 3

另一種方式來達到同樣的結果可能是從你返回咖喱功能Component

的方法將採取一個值，並等待事件在執行操作之前被調用。

我更喜歡這種方式，因爲我想盡可能地限制JSX中的JavaScript。

dlt_item(key){ 
    // return the event listener 
    return function(e) { 
    // do something with the state 
    }.bind(this) // bind the inner functions this to the Component 
} 

的，當你想調用的函數，你可以做這樣的

<button onClick={this.dlt_item(i)}>Delete</button> 

var App = React.createClass({ 
 
    getInitialState(){ 
 
    return { 
 
     items:[1,2,3] 
 
    } 
 
    }, 
 
    // this function will take your key 
 
    dlt_item(key){ 
 
    // return the event listener 
 
    return function(e) { 
 
     this.setState({ 
 
     items: splice(this.state.items, key, 1) 
 
     }) 
 
    }.bind(this) 
 
    }, 
 
    renderItem(){ 
 
    return this.state.items.map((item,i)=> (
 
     <li key={i}>{item}&nbsp; 
 
     <button>Edit</button> 
 
     <button onClick={this.dlt_item(i)}>Delete</button> 
 
     </li> 
 
    )) 
 
    }, 
 
    render(){ 
 
     return(
 
     <ul> 
 
      {this.renderItem()} 
 
     </ul> 
 
    ) 
 
    } 
 
}) 
 

 
// immutable splice helper function 
 
const splice = (arr, index, count = 0, ...items) => { 
 
    return [ 
 
    ...arr.slice(0, index), 
 
    ...items, 
 
    ...arr.slice(index + count) 
 
    ] 
 
} 
 

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

<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> 
 
<main id="app"></main>