最近、Reactの学習が始まりました。コンポーネントにデータグリッドがあります。行をクリックするとイベントが発生しました。イベントハンドラでは、行の小道具(クリックされた行の各列の値)を取得できました。ですから、私が達成したいのは、フォームコンポーネントに3つのボタンがあり、グリッドのonClick of Rowが有効になります。私は各ボタンの新しいページonClickに移動したいので、グリッドで選択された行に対して異なるアクションを実行します。私が直面している問題は、これらのボタンを使用して異なる操作を実行するためにRow値が必要なので、どのようにRow Propsをすべての3つのボタンのハンドラに渡すことができるかです。渡された小道具の保管方法Reactでのイベントのクリック
onRowclick = (row) =>
{
this.context.route.push(`path\${row.ID}`);
}
onButton1click = (row) =>
{
this.context.route.push(`path\${row.ID}`);
}
.
.
.
onButton3click = (row) =>
{
this.context.route.push(`path\${row.ID}`);
}
私はすべての3つのイベントハンドラでrow.IDを必要とするが、私はコンポーネント全体でこれを使用することができるようになりますように状態でこれを格納するために彼らのいくつかの方法ですか。?
UPDATE:以下は、この
constructor(props) {
super(props);
this.state = this.getInitState(props);
this.intitialize();
}
intitialize(){
this.selectedRow = {};
}
getInitState(props) {
return {selectedRow: undefined};
}
// on Row click storing the row object(which contains row data)
onRowClick = (row) => {
this.selectedRow = row;
}
を達成するためのコードが、私はそれがREDUXを使用する時間だと思うリアクト
コード – Codesingh
を共有してください子(ボタン)に親(行)から小道具を渡すために数多くの方法があります。行がどのように子コンポーネントを作成または受け取るかによって、その小道具を渡す最善の方法が決まります。 –
ありがとう@RobLynch。私は解決策を追加した – mayuri