なぜトリガされたメソッドですか？

Question

私はREACTコンポーネントを作成し、Redux接続を使用してボタンを押してメソッドを呼び出して呼び出します。コードがあります：

const PageClientOne = ({onSubmit, onDelete, client}) => { 
    return(
     <form style={styles.enter} onSubmit={_handleSubmit(client,onSubmit)}> 
     // ... something code 

      <Button type="submit" theme="success">Save</Button> 
      <Button type="button" 
          theme="error" onClick={onDelete(client._id)}>Delete</Button> 
     </form> 
    ) 
} 

const _handleSubmit = (client, onSubmit) => { 
    return event => { 
     event.preventDefault() 
     onSubmit(client) 
    } 
} 

const mapStateToProps = (state, ownProps) => { 
    return { 
     client: state.reducers.clientsState.client 
    } 
} 

const mapDispatchToProps = (dispatch) => ({ 
    onSubmit: (client) => { 
     dispatch(saveClient(client)) 
    }, 
    onDelete: (id) => { 
     console.log("DELETE") 
    } 
} 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(PageClientOne) 

問題はonDeleteはしていないだけで、ボタンをクリックした際に、ページのロード時にトリガということです。私は間違って何をしていますか？

Answer 1

そのわずかに異なります。

変更この、

<Button type="button" theme="error" onClick={onDelete(client._id)}>Delete</Button> 

https://facebook.github.io/react/docs/handling-events.html

Answer 2

（私は非常に精通していないよ反応するので、これは間違っている可能性が...）

あなた<form>要素を作成するとき、あなたはこのようなボタンを定義します。

<Button type="button" theme="error" onClick={onDelete(client._id)}>Delete</Button> 

コードで角括弧 - {onDelete(client._id)} - 要素の作成時にが実行され、（ページロード時）、の結果はと評価され、コード自体には挿入されません。あなたは普通のonclick属性を持つことを意図していました。そういつものHTMLのように引用符""のコードを置く：リアクトで

onclick="onDelete(client._id)" 

Answer 3

、詳細はこちらをお読み

<Button type="button" theme="error" onClick={()=>onDelete(client._id)}>Delete</Button> 

に問題がonClickの

であります

コールバック関数を渡す代わりに、実際に要素作成時にonDeleteを呼び出しています。

<Button type="button" theme="error" onClick={onDelete.bind(this, client._id)}>Delete</Button> 

を試してみて、それがお役に立てば幸いです。

Answer 4

私の答えはあなたの質問に対応することを願っています。 ページが更新されると、削除ボタンがフォームを送信していたようです。 したがって、送信を防止する必要があります。

const mapDispatchToProps = (dispatch) => ({ 
    onSubmit: (client) => { 
     dispatch(saveClient(client)) 
    }, 
    onDelete: (evt, id) => { 
     evt.preventDefault() 
     console.log("DELETE") 
    } 
} 

そして、あなたの削除ボタン

<Button type="button" theme="error" onClick={(evt) => onDelete(evt, client._id)}>Delete</Button>