web-dev-qa-db-ja.com

React Componentでの条件付きonClick動作の設定

ボタン（「送信」タイプの入力フィールド）がクリックされるとデータを送信するコンポーネントに取り組んでいます。ただし、入力フィールドが空白の場合に画面にアラートを表示するためのセーフガードを導入したいと思います。

これがコンポーネント属性の場合と同じように機能することを考えて、私は多くの運がなくても以下のバリエーションを試しました：

onClick={props.inputText === '' 
                ? 
                alert("Text cannot be blank.") 
                : 
                (e => props.onSubmit(props.inputText))}/>

onSubmit関数内のチェックを実行しないで、ストアへの更新を可能な限り分離します（React-Redux構造に従っています）。

JSXがこのような状況を処理するかどうか、またどのように処理するかについてのアイデアはありますか？

reactjsreact-reduxreact-jsx
10
GroomedGorilla

これはうまくいくはずです：

onClick={() => { props.inputText === '' ? 
   alert("Text cannot be blank.") : 
   props.onSubmit(props.inputText)  }}
17
CD..

値をonClick eventに割り当てていますが、onclickは関数を想定しています。これを実現するには、すべてのロジックを関数本体内にラップします。

このように書いてください：

onClick={ e => {
    props.inputText === '' ? 
        alert("Text cannot be blank.") 
    : 
        props.onSubmit(props.inputText)}
    }
/>

または

onClick={this.onClick.bind(this)/>

onClick(e){
    if(props.inputText === ''){
        alert("Text cannot be blank.");
        return;
    }
    props.onSubmit(props.inputText);
}
4
Mayank Shukla