素材宇井フィールドピッカー

Question

私はだから私はフィールド間で選択することができます。この

のようなものを作りたい

、どのようにそれは、材料のUIでこのようなものを作成することは可能でしょうか？

Answer 1

ボタンごとにコンポーネントを作成し、画像にマークされていない背景色を定義するclassNameを指定します。 classNameはstateプロパティである必要があります。

その後、onClickの中には、赤い背景を持つCSSクラスのプロパティstateが変更されます。例えば

：

class Button extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {buttonDesign: "not-selected"}; 
     this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
     if (this.state.buttonDesign == "selected"){ 
      this.setState({ 
      buttonDesign: "not-selected" 
      }); 
     } 
     else if (this.state.buttonDesign == "not-selected"){ 
      this.setState({ 
      buttonDesign: "selected" 
      }); 
     } 
     } 
    }; 

    render() { 
     return(
      <button className={this.state.buttonDesign} onClick={this.handleClick}> 
       "your button name" 
      </button> 
     ); 
    } 
} 

とCSSファイルで、あなたがこのようなものが必要です：

.not-selected { 
    background-color : #ff9191; // or your color 
} 
.selected{ 
    background-color: #ff0000; // or your color 
} 

をそして、あなたはどれが選択されているかを追跡するためにいくつかのロジックが必要になります。