Reactjs, как использовать ref внутри функции карты? - PullRequest
Новая
       4

Reactjs, как использовать ref внутри функции карты?

0 голосов
/ 22 января 2019

Я сопоставляю массив и для каждого элемента показываю кнопку с текстом.Скажем, я хочу, чтобы при нажатии на кнопку текст под ней изменил свой цвет на красный.Как я могу нацелить брата на кнопку?Я попытался использовать 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;

Как объяснено, результат заключается в том, что на каждой кнопкенажмите, абзац, прикрепленный к последней кнопке, будет нацелен.

Заранее спасибо

Ответы [ 3 ]

0 голосов
/ 22 января 2019

Я нашел способ сделать это без использования ref, используя ключевое свойство карты: 

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

Я не уверен, так ли это хорошо, чтобы получить доступ к DOM, как так, вместоиспользуя ссылки для непосредственного нацеливания на элементы.

0 голосов
/ 30 мая 2019

Вот мой рабочий пример codepen, основанный на вашем коде выше

Связанный пример - это «фактический» аккордеон, то есть отображение и скрытие смежного контента.

(см. Фрагменты кода ниже для перехода ккрасный)

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

КОД SNIPPETS

инициализировать массив ссылок: 

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'
};
0 голосов
/ 22 января 2019

Инициализируйте this.accordionContent как массив 

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

И установите ref следующим образом 

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