如何添加一個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類到點擊元素 - 反應

回答

相關問題