onClickイベントの後にpropで属性を設定するにはどうすればよいですか？

Question

私は私の状態に値を送信し、2回目のクリックでの状態からそれを削除する必要がありonClickイベントとボタンがあります。

<button 
type="button" 
value={posts.index} 
onClick={this.props.data ? this.props.remove : this.props.add} 
key={cont._id} 
data={-1} 
> 

私の問題は、私は1にデータ属性を設定する方法を知らないということです最初のクリックの後に2回目のクリックで削除機能が起動します。どのように達成するのですか？

export function add(e) { 
     return{ 
     type: ADD, 
     payload: e.target.value 
     } 

} 

Answer 1

あなたはdata属性が含まれているしたい値が含まれています。

まず、親コンポーネントでdataがstateプロパティとして定義されていることを確認して、親とボタンの両方に影響を与えるように操作できるようにします。 （まだ親に）thisスコープこれら行わ付き

constructor(props, context) { 
    this.add = this.add.bind(this) 
    this.remove = this.remove.bind(this) 
} 

に、

add() { 
    this.setState({data: this.state.data + 1}); 
} 

remove() { 
    this.setState({data: this.state.data - 1}); 
} 

そしてもちろんのコンストラクタバインドを、：

次に、見えるようにadd()とremove()関数を定義次のようにボタンを定義できます。

<button 
    type="button" 
    value={posts.index} 
    onClick={this.props.data ? this.props.remove : this.props.add} 
    key={cont._id} 
    data={this.props.data} > 

DOMの変化がデータによって引き起こされることを最も強く信じています。この設定では、add()またはremove()コールバックを呼び出すことによって親データ属性に変更を加えるたびに、ボタンが再描画されて新しいデータ値が反映されます。

Answer 2

アクションの作成者は、リターンの前に値を設定します。私は小道具でdata属性を想定してい

render() { 
    const buttonAction = this.props.data ? this.props.remove : this.props.add 
    return ( 
    <button 
     type="button" 
     value={posts.index} 
     onClick={buttonAction} 
     key={cont._id} 
     data={this.props.data}> 
    ) 
}