React/Html：選択したものの色を変更します。

Question

私はクラスプロジェクトに取り組んでいます。私はちょっと立ち往生しています。私のアプリでは、選択されているテキストの色を変更できるようにしたいと考えています。したがって、この場合、クリックされた 'h2'タグが、ユーザーによって選択されている場合は赤色に変わります。

私はまだ反応していないので、物を縛る方法を考えるのは少し難しかったです。 複数の 'h2'タグがあるため、新しい状態を設定したくないので、変更された場合、他のすべてのタグも変更されることが懸念されます。この上の任意の方向は素晴らしいことだ

import React, { Component } from 'react'; 
import UpdateReasons from '../../actions/updateReasons.js'; 
import { Link } from 'react-router'; 
// import ReasonStyle from './reasons.css'; note: imported via index.html // style folder 
import FontAwesome from 'react-fontawesome'; 

class ReasonsHappy extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     reasons: [] 
    } 
    } 

    reply_click(clicked_value) { 
    const reasons = []; 
    reasons.push(clicked_value) 
    this.setState({ 
     reasons: this.state.reasons.concat(reasons) 
    }) 

    } 

    render() { 


    return (

     <div className='buttonDiv {ReasonStyle}'> 

     <h2 id = 'reasonsId' active = 'false' onClick={() => {this.reply_click("Great Culture")}} type="button" className="btn btn-lg reason" value={"Great Culture"}> <b> Great Culture </b> </h2> 
     <h2 id = 'reasonsId' active = 'false' onClick={() => {this.reply_click("Flexible Managers")}} type="button" className="btn btn-lg reason" value={"Flexible Managers"}> <b> Flexible Managers </b> </h2> 
     <h2 id = 'reasonsId' active = 'false' onClick={() => {this.reply_click("Friendly Co-workers")}} type="button" className="btn btn-lg reason" value={"Friendly Co-workers"}> <b> Friendly Co-workers </b> </h2> 
     <h2 id = 'reasonsId' active = 'false' onClick={() => {this.reply_click("Upbeat Work Environment")}} type="button" className="btn btn-lg reason" value={"Upbeat Work Environment"}> <b> Upbeat Work Environment </b> </h2> 
     <h2 id = 'reasonsId' active = 'false' onClick={() => {this.reply_click("Work is Appreciated")}} type="button" className="btn btn-lg reason" value={"Work is Appreciated"}> <b> Work is Appreciated </b> </h2> 
     <h2 id = 'reasonsId' active = 'false' onClick={() => {this.reply_click("Flexible Work Hours")}} type="button" className="btn btn-lg reason" value={"Flexible Work Hours"}> <b> Flexible Work Hours </b> </h2> 
     <h2 id = 'reasonsId' active = 'false' onClick={() => {this.reply_click("New Opportunities")}} type="button" className="btn btn-lg reason" value={"New Opportunities"}> <b> New Opportunities </b> </h2> 

     <br></br> 

     <p id='submitP'> 
      <Link to="/stats"> 
      <FontAwesome name="arrow-circle-right" id="arrow" onClick={() => {UpdateReasons(this.state.reasons)}}/> 
      </Link> 
     </p> 
     </div> 
    ) 
    } 
}; 


export default ReasonsHappy; 

：ここ

は、私が今持っているコードです。ありがとう！

Answer 1

react componentsをよく読んで、propsとhandlersを渡す方法をお読みください。 propsまたはネイティブ属性を実際のDOM要素に渡すことはできません。そしてまた、あなたが受け入れることができコンポーネントとid、activeバック親クリックされた現在の項目idに渡しますonClickハンドラを作成することができますどのようにthinking in react

読みください。親はidをその状態に設定し、条件付きでそれぞれactiveの小道具を渡します。ここで

はあなたが始めるために小さな実行している例です。

class Item extends React.Component { 
 
    handleClick =() => { 
 
    const { itemId, onClick } = this.props; 
 
    onClick(itemId); 
 
    } 
 
    render() { 
 
    const { text, active } = this.props; 
 
    return (
 
     <div className={`header ${active && 'active'}`} onClick={this.handleClick}>{text}</div> 
 
    ); 
 
    } 
 
} 
 

 
class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     activeItem: 0, 
 
     items: [ 
 
     { 
 
      text: 'item 1', 
 
      id: 1 
 
     }, 
 
     { 
 
      text: 'item 2', 
 
      id: 2 
 
     }, 
 
     { 
 
      text: 'item 3', 
 
      id: 3 
 
     }, 
 
     { 
 
      text: 'item 4', 
 
      id: 4 
 
     }, 
 
     ] 
 
    } 
 
    } 
 

 
    onItemClick = (id) => { 
 
    this.setState({ activeItem: id }); 
 
    } 
 

 
    render() { 
 
    const { items, activeItem } = this.state; 
 
    return (
 
     <div > 
 
     { 
 
      items.map((item) => { 
 
      return (
 
       <Item 
 
       key={item.id} 
 
       text={item.text} 
 
       itemId={item.id} 
 
       onClick={this.onItemClick} 
 
       active={item.id === activeItem} 
 
       /> 
 
      ) 
 
      }) 
 
     } 
 
     </div> 
 
    ); 
 
    } 
 

 
} 
 

 

 
ReactDOM.render(<App />, document.getElementById('root'));

.header{ 
 
    margin: 10px 0; 
 
    padding: 15px; 
 
    box-shadow: 0 0 2px 1px #333; 
 
    cursor: pointer; 
 
} 
 

 
.active{ 
 
    color: #fff; 
 
    background-color: #333; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>