如何添加一个CSS类到点击元素 - 反应

如何添加一个CSS类到现有的REACT元素点击？如何添加一个CSS类到点击元素 - 反应

我创建了一个的jsfiddle：this.setState({color:blue});

我想是这样this.setState({className: 'green'}); 我在做什么错：https://jsfiddle.net/5r25psub/

在小提琴，如果我有语句的代码只适用？

代码：

<html> 
    <script> 
     var Hello = React.createClass({ 
      getInitialState: function(){ 
       return { 
        color: 'blue' 
       }; 
      }, 
      handleClick: function(){ 
       if (this.state.color === 'blue'){ 
        this.setState({className = " green"}); 
       } else { 
        this.setState({color: 'blue'}); 
       } 
      }, 
      render: function() { 
       return <button className={this.state.className} onClick={this.handleClick}>My background is: {this.state.color}, Click me to change</button>; 
      } 
     }); 

     React.render(<Hello name="World" />, document.getElementById('container')); 

    </script> 
    <body> 
    <script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script> 
<style> 
.green { 
    background-color: lightgreen; 
} 

.blue { 
    background-color: lightblue; 
} 
</style> 

    <div id="container"> 
     <!-- This element's contents will be replaced with your component. --> 
    </div> 
    </body> 
    </html>

来源

2016-03-30 chrisrhyno2003

您在'handleClick'里面写了'className =“green”'但它应该是'className：“green”' – jaybee

你需要的所有状态参数添加到getInitialState，现在你拥有的唯一的事情是color，所以this.state.color是唯一在那里

当你设置你的状态到className：东西，这是现在唯一的东西，甚至颜色已经消失...这就是为什么初始颜色是正常的平淡灰色

你在setState中也有语法错误，它的否牛逼

this.setState({className = " green"});

它应该是：

this.setState({className: " green"});

最后，React.render已被弃用，你需要使用ReactDOM.render现在

小提琴：https://jsfiddle.net/omarjmh/69z2wepo/36597/

来源

2016-03-30 19:31:31 JordanHendrix

我有点困惑我该如何检索classList。 element.getClassList（）在React中工作吗？或者还有其他方式可以这么做吗？ – chrisrhyno2003

为什么你需要一个班级名单？看看我发布的小提琴中的代码，你有不正确的外部资源，打开控制台，看看它说什么，这就是我回答你的问题 – JordanHendrix

您可以使用这里找到模块classnames ：

https://www.npmjs.com/package/classnames

所以，你会做这样的事情：

getClassNames() { 
    return classNames({ 
     'blue': this.state.clicked, 
     'green': !this.state.clicked 
    }); 
}, 
render() { 
    return <button className={this.getClassNames()} onClick={this.setState({clicked: !this.state.clicked})> 
}

来源

2016-03-30 19:43:49 sma

好，不知道这一点，总是只是编码在我自己中，概率仍然会。大声笑 – JordanHendrix

https://jsfiddle.net/ajvf50s6/3/

最可能的是，你应该做的更好基础上，className，而不是在color国家财产验证：

handleClick: function(){ 
    if (this.state.className === 'blue'){ 
     this.setState({className: "green"}); 
    } else { 
     this.setState({className: "blue"}); 
    } 
}

另外，正如@Omarjmh提到的，您的代码中存在拼写错误。 {className = " green"}是错误的任务。

来源

2016-03-30 19:44:11

完美！这绝对有帮助。我有一个后续问题 - 如何将CSS类添加到已有类的现有元素。例如，一个元素

，我想对类centre_align添加到它，使得它现在看起来：

这可能吗？ – chrisrhyno2003

我建议你看看https://github.com/JedWatson/classnames –

此外，这是一个单一的元素。是否有必要保存多个元素的状态？ – chrisrhyno2003

如何添加一个CSS类到点击元素 - 反应

回答

相关问题