反応しているボタンにpropを使って無効な属性を追加するにはどうすればいいですか？

Question

私は反応でカスタムボタンコンポーネントを作成しています。私はボタンが有効または無効になる値に基づいて、そのボタンに小道具を渡すことにします。

私の問題は です - 単に無効なプロパティが存在するだけで要素が無効になるため、その値を "false"に設定することはできません。次のコードでも要素を無効にしています

属性を完全に削除するか、javascriptでプロパティを設定する必要があります。

document.getElementById("myBtn").disabled = true; 

マイカスタムボタンコンポーネントがある -

import React from 'react'; 

const CustomButton = ({ whenClicked, classNames, buttonText, isDisabled }) => 
    (
     <button 
      onClick = {whenClicked} 
      className = {`btn ${classNames}`} 
      type  = "button" 
      disabled = {isDisabled} 
     > 
      {buttonText} 
     </button> 
    ); 

export default CustomButton; 

isDisabledはブール値です。

もう1つは、カスタムボタンを使用しているときに、ボタンの動作をサブミットするのを失ったことです。今私は常にクリックハンドラを渡す必要があります。もう一度同じ行動を達成する方法はありますか？

Answer 1

あなたが現在持っているものは完璧にうまくいくはずです。 CustomButtonを使用するときは、disabledの値をstringとして送信しないように注意してください。それはあなたが渡すものにかかわらず無効にします。代わりにJSX構文でブール値を渡す必要があります。

... 
render() { 
    <div> 
     ... 
     <CustomButton 
      whenClicked={() => console.log('I just got clicked')} 
      buttonText="Some Button" 
      isDisabled={false} 
     /> 
     ... 
    </div> 
    } 
... 

は、基本的には、代わりに偽のあなたが何か他のものに渡すことができ

：

は、ここでは、ボタンを使用するコンポーネントのレンダリング機能の中にそれを置く使用例です。 CustomButtonを保持するコンテナの小道具に格納されているブール値を渡すことができます。

isDisabled={this.props.disableInnerButton}と言っても過言ではないでしょう。ブール値を変更すると、ボタンが無効または有効になります。

Statement to add or not an attribute in JSX