Реагировать карта на клик и "это" не определено - PullRequest
Новая
       18

Реагировать карта на клик и "это" не определено

1 голос
/ 07 мая 2019

ОБНОВЛЕНИЕ: 

function TheCards() {
    let cardMasterList = require('./scryfall-oracle-cards.json')
    let cardMasterListSorted = sortByKey(cardMasterList, 'name')

    let [cardClicked, setCardClicked] = useState(null)

    //console.log(cardMasterList[0].name)
    //console.log(cardMasterListSorted)

    const handleClick = () => {
        setCardClicked('red')
        console.log(cardClicked)
        //Please make this do something with the clicked span tag!
    }

    return (
        <form id="card-master-list">
                {cardMasterListSorted
                    .filter(({legalities}) => legalities.vintage === 'legal')
                    .filter(({rarity}) => rarity === 'common' || 'uncommon')
                    .slice(0,10)
                    .map(
                    (cardName) => {
                        return (
                            <li key={cardName.id}>
                                <span className="card-name" onClick={ handleClick }>{cardName.name}</span>
                            </li>
                        )
                    }
                )
            }
        </form>
        )
}

Обновление: это обновленный код выше. Я все еще не могу понять, как ссылаться на то, что я нажимаю. Я хочу сделать больше, чем просто изменить цвет текста, я просто использую «изменить его на красный» как нечто простое. Мне грустно говорить, что мне не хватает jQuery и его простых «this» опорных точек, потому что что-то вроде «this.handleClick» не работает. 

function TheCards() {
    let cardMasterList = require('./scryfall-oracle-cards.json')
    let cardMasterListSorted = sortByKey(cardMasterList, 'name')

    console.log(cardMasterList[0].name);
    console.log(cardMasterListSorted)

    return (
        <form id="card-master-list">
                {cardMasterListSorted
                    .filter(({legalities}) => legalities.vintage === 'legal')
                    .filter(({rarity}) => rarity === 'common' || 'uncommon')
                    .map(
                    (cardName) => {
                        return (
                            <li key={cardName.id}>
                                <span className="card-name" onClick={ function DoTheThing() { document.querySelector('.card-name').style.color = 'red' } }>{cardName.name}</span>
                            </li>
                        )
                    }
                )
            }
        </form>
        )
}

Все, что я хочу сделать, это чтобы при нажатии на промежуток он становился красным. Это кажется невозможным, так как ничего, что я пробую, не работает - пишу другую функцию для запуска любым возможным способом. «это» не работает, как ожидалось. Чем можно заменить строку document.querySelector, чтобы она работала?

Ответы [ 3 ]

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

Вот пример того, как обновить стили способом React: 

import React, { useState } from "react";
import ReactDOM from "react-dom";

const tiles = [
  {
    id: 1,
    n: "one"
  },
  { 
    id: 2, 
    n: "two" 
  }
];

const App = () => {
  const [clickedId, setClickedId] = useState(null);

  const click = id => {
    setClickedId(id);
  };

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      {tiles.map(tile => (
        <div
          onClick={() => click(tile.id)}
          style={{ color: tile.id === clickedId ? "red" : "black" }}
        >
          {tile.n}
        </div>
      ))}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Живой пример здесь .

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

Это должно работать так, как есть. Хотя, как указал codecubed.io, это не очень эффективный способ сделать это. вместо этого предпочтительнее переключать класс. как то так: 

const styles = {
  redTextClass: {
     color: 'red',
  }
}


<span className={stateVariable ? styles.redTextClass : null}></span>
0 голосов
/ 07 мая 2019

Метод в вашем коде не является рекомендуемым способом обновления интерфейса при рендеринге с помощью React. В идеале вы должны обновить стиль диапазона, используя данные стилей, хранящиеся в состоянии ваших компонентов: 

<li key={cardName.id}>
    <span className="card-name" onClick={ 
        () => {
            /* Set the color state of component to red which triggers a
               render() and will update the style prop of the span 
               accordingly */
            this.setState({ color : 'red' });    
        }
    } style={{ color : this.state.color }}>
    {cardName.name}</span>
</li>

Если вы действительно хотите обновить стиль с помощью шаблона в исходном коде, то один из способов сделать это - через "callback ref" , который даст вам доступ к соответствующему элементу DOM диапазона : 

<li key={cardName.id}>
    <span className="card-name" ref={ (spanElement) => {

        spanElement.addEventListener('click', () => {

            spanElement.style.color = 'red';
        });
    }}>
    {cardName.name}</span>
</li>
...