web-dev-qa-db-ja.com

Reactjsマップ関数内でrefを使用する方法？

私は配列を使ってマッピングしていて、各アイテムごとにテキスト付きのボタンを表示しています。ボタンをクリックすると、下のテキストの色が赤に変わることを望みます。ボタンの兄弟をどのようにターゲットできますか？ refを使用してみましたが、それはマップされたjsxであるため、最後のref要素のみが宣言されます。

これが私のコードです：

class Exams extends React.Component {
    constructor(props) {
        super()
        this.accordionContent = null;
    }
    state = {
        examsNames: null, // fetched from a server
    }
    accordionToggle = () => {
        this.accordionContent.style.color = 'red'
    }
    render() {
        return (
            <div className="container">
                {this.state.examsNames && this.state.examsNames.map((inst, key) => (
                    <React.Fragment key={key}>
                        <button onClick={this.accordionToggle} className="inst-link"></button>
                        <div ref={accordionContent => this.accordionContent = accordionContent} className="accordionContent">
                            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam, neque.</p>
                        </div>    
                    </React.Fragment>
                ))}
            </div>
        )
    }
}


export default Exams;

説明したように、結果はボタンをクリックするたびに、最後のボタンに添付された段落がターゲットになるということです。

前もって感謝します

cssreactjsref
10
sir-haver

初期化this.accordionContent配列として

constructor(props) {
    super()
    this.accordionContent =[];
}

そしてrefをこのように設定します

<div ref={accordionContent => this.accordionContent[key] = accordionContent} className="accordionContent">
9
Prakash Sharma

上記のコードに基づいたコードペンの例

リンクされた例は、「実際の」アコーディオンです。つまり、隣接するコンテンツを表示および非表示にします。

（赤に変更するには、以下のコードスニペットを参照してください）

https://codepen.io/PapaCodio/pen/XwxmvK?editors=001

コードスニペット

参照配列を初期化します。

constructor(props) {
    super();
    this.accordionContent = [];
}

次のキーを使用して、参照配列に参照を追加します。

<div ref={ref => (this.accordionContent[key] = ref)} >

onClickを介してトグル関数にキーを渡す

 <button onClick={() => this.accordionToggle(key)} >

最後にトグル関数内のキーを参照します

accordionToggle = key => {
    this.accordionContent[key].style.color = 'red'
};
2
PapaCodio

マップのkeyプロパティを使用して、参照を使用せずにそれを行う方法を見つけました：

 accordionToggle = (key) => {
        console.log(key)
        var a = document.getElementsByClassName('accordionContent')
        a[key].style.color = 'red'
    }

Refを使用して要素を直接ターゲットにするのではなく、そのようにdomにアクセスするのが良いかどうかはわかりません。

0
sir-haver