Question

如何在映射列表dom中处理切换类onclick函数。

this.state.data.map(function(el,i){
    var className = self.state.condition ? 'list-row active' : 'inactive';
    return <div className={className} key={i} onClick={self.handleClick.bind(self)}>
            <div>List</div>
        </div>
    });

Answer 1

将整个div和onClick处理程序移动到另一个组件，然后使用数组中的props映射该组件。类似的东西：

const ChildComponent = ({ condition, handleClick }) => {
  var className = condition ? 'list-row active' : 'inactive';
  return (
    <div className={className} onClick={() => handleClick()}>
      <div>List</div>
    </div>
  )
}

只需在容器中使用此组件：

this.state.data.map((el ,i) => (
  <ChildComponent key={i} condition={this.state.condition} handleClick={() => this.handleClick()} />
))

我不确定您是否希望您的孩子也有状态，但使用相同的做法也很容易实现。我强烈建议使用ES6语法进行反应（箭头函数等），让生活变得如此简单，而不必跟踪tthis / self并将其绑定到任何地方。

Answer 2

如果您只想保持1个项目处于活动状态，则可以保留对您所在州的所选项目的引用。然后，您可以编写onClick回调来更改所选项目。

var MyList = React.createClass({
  getInitialState: function(){
    return {
      data: ['foo', 'bar', 'baz'],
      selected: null
    }
  },

  selectItem: function(el){
    this.setState({selected: el});
  },

  renderItem: function(el){
    var className = this.state.selected === el ? 'active' : 'inactive';
    var onClick = this.selectItem.bind(this, el);
    return <li key={el} className={className} onClick={onClick}>{el}</li>;
  },

  render: function() {
    return (
      <ul>
      { this.state.data.map(this.renderItem) }
      </ul>
     );
  }
});

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

如果您希望能够在每个列表项之间切换活动和非活动，则可以使用相同的方法，但将对象保留为selected状态：

getInitialState: function(){
    return {
      data: ['foo', 'bar', 'baz'],
      selected: {}
    }
  },

  selectItem: function(el){
    var selected = this.state.selected;
    selected[el] = !selected[el];
    this.setState({selected: selected});
  },

并相应地修改renderItem功能：

var className = this.state.selected[el] ? 'active' : 'inactive';
var onClick = this.selectItem.bind(this, el);

在映射函数中反应js onclick toggle类

2 个答案: