Question

import React from 'react';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            items: ['Item 1...', 'Item 2...', 'Item 3...', 'Item 4...']
        }
        this.handleAdd = this.handleAdd.bind(this);
    };
    handleAdd() {
        var newItems = this.state.items.concat([promt('Create New item')]);
        this.setState({ items: newItems });
    }
    render() {
        var items = this.state.items.map(function (item, i) {
            return (
                <div key={item} onClick={this.handleRemove.bind(this, i)}>
                    {item}
                </div>
            );
        }.bind(this));

        return (
            <div>
                <button onClick={this.handleAdd}>Add Item</button>

                <ReactCSSTransactionGroup
                    transactionName="example"
                    transactionEnterTimeout={500}
                    transactionLeaveTimeout={500}>
                    {items}
                </ReactCSSTransactionGroup>
            </div>
        );
    }
}
export default App;

Answer 1

不知道它是否有帮助，但我认为这种行为你希望它有所帮助，因为你从这个 .state.items.map执行你不必绑定它。

import React, { Component } from 'react';
import unique from './unique';

class TestDiv extends Component {
  constructor(){
    super();
this.state={
  items:[
    {text:"textOne"},
    {text:"textTwo"}
  ]
}
}
 handleClick(e,index){
let temp = this.state.items.slice(0);
temp.splice(index,1);
this.setState({
  items:temp
})
}

render() {
let items = this.state.items.map((item,index)=>{
  return(
    <div key={unique.create()} onClick={this.handleClick.bind(this,index)}>
    <p>{item.text}</p>
    </div>
  )
})
 return (
   <div>
     {items}
   </div>
 )
 }
}

export default TestDiv;

Answer 2

第一个问题：你的App类上不存在handleRemove，所以你需要创建它，然后在构造函数中绑定它（就像你对handleAdd所做的那样）（参见： bind in constructor, react docs）。

class App extends React.Component {
  constructor (props) {
    ...
    this.handleRemove = this.handleRemove.bind(this);
  }
  handleRemove (item) { ... }
}

注意：如果您使用的是babel，使用transform-class-properties插件将允许您使用class properties，这意味着您不需要在构造函数中绑定所有类函数（请参阅： babel class properties plugin, babel docs）。

class App extends React.Component {
  constructor (props) {
    ...
    this.handleRemove = this.handleRemove.bind(this);
  }
  handleRemove (item) { ... }
}

// becomes ...

class App extends React.Component {
  constructor (props) {
    // no bind needed here
  }
  handleRemove = (item) => { ... }
}

第二个问题：您的商品实际上并未呈现，因此您需要以下内容：

{
  this.state.items.map((item) =>
    <div key={item} onClick={this.handleRemove(item)}>
      {item}
    </div>
  )
}

要注意的下一个问题：它可能会导致性能问题在render中具有函数/箭头函数/绑定（请参阅：arrow functions in render, react docs）。解决这个问题的方法是将项目渲染提取到一个单独的组件中，或类似下面的内容：

class App extends React.Component {
  constructor (props) {
    super(props);
    this.handleAdd = this.handleAdd.bind(this);
    this.handleRemove = this.handleRemove.bind(this);
    // initialize your state here
  };

  handleAdd = (value) => { /* logic to add value as an item */ }

  handleRemove = (item) => { /* logic to remove item*/ }

  renderItem = (item) =>
    <div key={item} onClick={this.handleRemove(item)}>
      {item}
    </div>

  render () {
    return (
      <div>
        {
          this.state.items.map((item) => this.renderItem(item)
        }
        {/* ... other code here */}
      </div>
    )
  }
}

未捕获的TypeError：无法读取属性＆＃39; bind＆＃39;在App.jsx中未定义

2 个答案: