Question

我需要添加课程＆＃34;活跃＆＃34;点击按钮后删除所有其他＆＃34;活动＆＃34;类。

请看这里：https://codepen.io/azat-io/pen/RWjyZX

var Tags = React.createClass({
  setFilter: function(filter) {
    this.props.onChangeFilter(filter);
  },
  render: function() {
    return <div className="tags">
      <button className="btn active" onClick={this.setFilter.bind(this, '')}>All</button>
      <button className="btn" onClick={this.setFilter.bind(this, 'male')}>male</button>
      <button className="btn" onClick={this.setFilter.bind(this, 'female')}>female</button>
      <button className="btn" onClick={this.setFilter.bind(this, 'child')}>child</button>
      <button className="btn" onClick={this.setFilter.bind(this, 'blonde')}>blonde</button>
     </div>
  }
});

var Kid = React.createClass({
  render: function() {
    return <ul>
      <li>{this.props.name}</li>
      </ul>
  }
});

var List = React.createClass({
  getInitialState: function() {
    return {
      filter: ''
    };
  },
  changeFilter: function(filter) {
    this.setState({
      filter: filter
    });
  },
  render: function() {
    var list = this.props.Data;

    if (this.state.filter !== '') {
      list = list.filter((i)=> i.tags.indexOf(this.state.filter) !== -1);
      console.log(list);
    } 

    list = list.map(function(Props){
      return <Kid {...Props} />
    });

    return <div>
      <h2>Kids Finder</h2>
      <Tags onChangeFilter={this.changeFilter}/>
      {list}
    </div>
  }
});

var options = {
  Data:  [{
    name: 'Eric Cartman',
    tags: ['male', 'child']
  },{
    name: 'Wendy Testaburger',
    tags: ['female', 'child']
  },{
    name: 'Randy Marsh',
    tags: ['male']
  },{
    name: 'Butters Stotch',
    tags: ['male', 'blonde', 'child']
  },{
    name: 'Bebe Stevens',
    tags: ['female', 'blonde', 'child']
  }]
};

var element = React.createElement(List, options);
React.render(element, document.body);

我如何在这里做得更好？

Answer 1

很简单。看看这个

https://codepen.io/anon/pen/mepogj?editors=001

基本上你想要处理组件的状态，以便检查当前活动的组件。你需要包括

getInitialState: function(){}
//and 
isActive: function(){}

查看链接上的代码

Answer 2

这非常有用：

https://github.com/JedWatson/classnames

你可以做像

这样的事情

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

或像这样使用

var btnClass = classNames('btn', this.props.className, {
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

Answer 3

由于您已经有<Tags>组件在其父级上调用一个函数，因此您不需要其他状态：只需将过滤器作为道具传递给<Tags>组件，并在渲染按钮时使用它。像这样：

将<Tags>组件中的渲染功能更改为：

render: function() {
  return <div className = "tags">
    <button className = {this._checkActiveBtn('')} onClick = {this.setFilter.bind(this, '')}>All</button>
    <button className = {this._checkActiveBtn('male')} onClick = {this.setFilter.bind(this, 'male')}>male</button>
    <button className = {this._checkActiveBtn('female')} onClick = {this.setFilter.bind(this, 'female')}>female</button>
    <button className = {this._checkActiveBtn('blonde')} onClick = {this.setFilter.bind(this, 'blonde')}>blonde</button>
  </div>
},

在<Tags>内添加一个函数：

_checkActiveBtn: function(filterName) {
  return (filterName == this.props.activeFilter) ? "btn active" : "btn";
}

在您的<List>组件中，将过滤器状态作为道具传递给<tags>组件：

return <div>
  <h2>Kids Finder</h2> 
  <Tags filter = {this.state.filter} onChangeFilter = {this.changeFilter} />
  {list}
</div>

然后它应该按预期工作。 Codepen here（希望链接有效）

Answer 4

来自他们的网站。

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menu</span>
}

https://reactjs.org/docs/faq-styling.html

Answer 5

您也可以使用纯js来完成此操作，就像使用jQuery的旧方法一样

如果您想要简单的方法，请尝试

Traceback (most recent call last):   File "script.py", line 45, in <module>
  edytta.sell_artwork(girl_with_mandolin, '$6M (USD)')   
    File "script.py", line 30, in sell_artwork
      veneer.add_listing(listed_artwork) 
        TypeError: add_listing() missing 1 required positional argument: 'new_listing'

如何用React.js添加一个类？

5 个答案: