CSSクラスをクリックして要素に追加する方法 - React

クリック時に既存のREACT要素にCSSクラスを追加するにはどうすればよいですか？CSSクラスをクリックして要素に追加する方法 - React

私はJSFiddleが作成した：https://jsfiddle.net/5r25psub/

をバイオリンでは、私は文を持っている場合、コードは動作します：this.setState({color:blue});

私は私が間違って何をやっているthis.setState({className: 'green'}); ような何かをしたいですか？

コード：

<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

あなたは今あなたが持っている唯一の事はcolorあるので、あなたはあなたの状態を設定するとthis.state.colorが

で唯一のもので、getInitialStateにすべての状態パラメータを追加する必要がありますto className：何か、今そこにある唯一のものです。色がなくなってしまっています...そのため、初期の色は普通の淡いグレーです。

setStateにも構文エラーがあります。トン

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

は、それは次のようになります。https://jsfiddle.net/omarjmh/69z2wepo/36597/

出典

2016-03-30 19:31:31 JordanHendrix

でなければなりません。 element.getClassList（）はReactで動作しますか？それとも他の方法がありますか？ – chrisrhyno2003

なぜクラスリストが必要ですか？私が投稿したフィドルのコードを見て、あなたは間違った外部リソースを持っていて、コンソールを開き、あなたの質問に答えるために私が取ったthatsすべてを見てください – JordanHendrix

あなたがここで見つけるモジュールclassnamesを使用することができます。

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

最後に、React.renderは廃止され、あなたが今

はフィドルReactDOM.renderを使用する必要があります：

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

いい、それは自分では、まだprobはします。笑 – JordanHendrix

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

おそらく、あなたが良いとは限りませんcolor状態の性質上、classNameに基づく検証を行う必要があります。

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クラスをクリックして要素に追加する方法 - React

答えて

関連する問題