Question

我有一个项目列表，点击删除按钮后该项目将被删除。我知道这样做的步骤，但我仍然坚持如何将密钥传递给dlt_item范围。

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

您需要将himg=GUI('name','test','NumberTitle','off'); %where GUI was designed using GUIDE handles = guihandles(himg); while ishandle(himg) if sum(depthMetaData.IsSkeletonTracked)>0 util_skeletonViewer(skeletonJoints,image,1,handles); %refer code below else imshow(image,'Parent',handles.axes1); end end function [] = util_skeletonViewer(skeleton, image, nSkeleton,handles) imshow(image,'Parent',handles.axes1);绑定为

this.dlt_item

并且在<button onClick={this.dlt_item.bind(this, i)}>Delete</button>函数中，您可以将状态数组与传递的索引进行拼接。

代码

dlt_item

<强> JSFIDDLE

您可以使用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}   <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'));作为

，而不是拼接

filter

<强> JSFIDDLE

Answer 2

使用<item name="android:actionMenuTextColor">@color/your_color</item>

在你的例子中：

.bind(this, yourKey)

Answer 3

获得相同结果的另一种方法是从你Component

返回一个curried函数

该方法将获取一个值并等待在执行操作之前调用该事件。

我更喜欢这种方式，因为我希望尽可能地限制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>

将函数中的函数传递给函数

3 个答案: