2017-12-28 18 views
1

FloatingButtonでチェックボックスの動作をシミュレートする必要があります。最初に、ボタンはセカンダリ属性をtrueに設定して読み込みます。これと同じように:クリックした場合クリック時のReactJS MaterialUI FloatingButtonの属性の切り替え

<FloatingActionButton secondary={true} mini> 
    T 
</FloatingActionButton> 

、それはこのように、falseにセカンダリ属性値を切り替えます:

<FloatingActionButton secondary={false} mini> 
    T 
</FloatingActionButton> 

ここでMはここで enter image description here

を活性化されたとの最終結果は何です私はやろうとしましたが、もちろん動作しません。笑

あなたが私のものよりもシンプルで、最小限の方法を持っているなら、私はそれもすべて上手くいっています。 ありがとうございます

+0

と次のように要素をレンダリングし、その後

constructor(){ this.state = { // initially blank, so no days are active activeDayIds: [], } } 

アクティブな日を追跡しconstructorで配列を初期化し、あなたはそれに文字列を渡しています。したがって引用符を削除する 'this.state.activeDayId === 1? true:false' –

+0

@Prakashsharma素晴らしいキャッチ!ただし、1回だけ切り替えることができます。私は交換の代わりにトグルする必要があります。また、wen私は文字列の引用符を取るそれは不要な三項のエラーをスロー – LOTUSMS

答えて

1

ボタンをトグルしたい場合は、idが既に設定されているかどうかをチェックする条件をメソッドに入れてくださいあなたはその後、複数の日を追跡したい場合は

は、あなたが持っている:それは

setActiveDay(id) { 
     if (id === this.state.activeDayId) { 
      // id is already selected and user has clicked on it again so reset it by assigning "null" to it 
      this.setState({activeDayId: null}); 
     } 
     else { 
      this.setState({activeDayId: id}); 
     } 
    } 

また、あなたはこの

<FloatingActionButton 
    secondary={this.state.activeDayId === 1} 
    mini 
    onClick={() => this.setActiveDay(1)}> 
     S 
</FloatingActionButton> 

アップデートのように三項演算子を使用せずにsecondary小道具にブール値を渡すことができますリセット配列を取る。 setActiveDay

これに
setActiveDay(id) { 
     let activeDayIds = [...this.state.activeDayIds]; 
     if (this.state.activeDayIds.includes(id)) { 
      // id is already in the array which means it is selected and user has clicked on it again so remove it from array 
      activeDayIds.splice(activeDayIds.indexOf(id), 1); 
     } 
     else { 
      // this id is not in the array yet which means user has activated this so include this in array 
      activeDayIds.push(id) 
     } 
     // set back the state 
     this.setState({activeDayIds: activeDayIds}); 
    } 

を変更してブール期待 `secondary`小道具条件

<FloatingActionButton 
     secondary={this.state.activeDayIds.includes(1)} 
     mini 
     onClick={() => this.setActiveDay(1)}> 
      S 
    </FloatingActionButton> 
+0

これはトグルを解決しました。しかし、私は今のところ1つしか保つことができません。別のトグルを切り替えると、もう一方のトグル状態が変更されます。多分私は最初からこのことについて間違っていました。ユーザーは、彼が選択した日またはその日を持っていなければなりません。あなたにアイデアを伝えるために、彼はそれを実行する日を選ぶプレイヤーです。すべてが可能で、1日しかかからない、3になる可能性があります。私のコードがあなたを混乱させる場合は、お詫び申し上げます。 – LOTUSMS

+0

これを簡単にすることはできますか? IDの代わりに、IDに関係なく、クリック時の状態を切り替えますか?私はIDを持っていました。なぜなら、この機能を7回繰り返さないようにしていたからです。毎日独立して作業する必要があります。 – LOTUSMS

+0

@LOTUSMS更新された回答を確認してください –

1

truefalseの値が引用符で囲まれている場合は、常にtrueの値になります。

あなたsecondary小道具で{this.state.activeDayId === 1 ? "true" : "false"} を持っているように、それは常にtrue

は次のように、引用符なしでそれを試してみてくださいされます。

<FloatingActionButton 
    secondary={this.state.activeDayId === 1 ? true : false} 
    mini 
    onClick={() => this.setActiveDay(1)}> 
    S 
</FloatingActionButton> 

以上単に:

<FloatingActionButton 
    secondary={this.state.activeDayId === 1} 
    mini 
    onClick={() => this.setActiveDay(1)}> 
    S 
</FloatingActionButton> 
+1

私はあなたのより簡単な方法が好きです。それは良い。しかし、ボタンは1回だけトグルします。私は何が欠けていますか? – LOTUSMS

+0

あなたの例では、常にidを1に設定し、それを切り替えないと思います。あなたは7日間、7つの 'FloatingActionButton'コンポーネントを持っていますか?もしそうであれば、各FloatingActionButtonは一意のIDを持つべきであり、 'onClick'アクションは与えられた' FloatingActionButton' idをその状態にセットすべきです。 – Nandito

+0

私はそれを試しましたが、1つのトグルだけが残っています。私は、7つの機能を構築せずに、独立して仕事をする必要があります。 – LOTUSMS

関連する問題