нацеливание на события с условным стилем - PullRequest
Новая
       10

нацеливание на события с условным стилем

0 голосов
/ 17 сентября 2018

Итак, я пытаюсь сделать так, чтобы функция onClick, при которой свойство в состоянии компонента превращалось в «true», когда я щелкаю по определенному тегу

, вот состояние 

constructor(props){
      super(props);
      this.state = {
        selected: false
      }
  }

Вот функция, я просто поворачиваю выбранный из ложного в истинное 

  targetValue = (e) => {
      e.preventDefault();
      this.setState({selected: true});
  }




<div className="choose">
              <a href="#" onClick={this.targetValue} className={(this.state.selected ? "choosen" : "")}></a>
              <a href="#" onClick={this.targetValue} className={(this.state.selected ? "choosen" : "")}></a>
              <a href="#" onClick={this.targetValue} className={(this.state.selected ? "choosen" : "")}></a>
              <a href="#" onClick={this.targetValue} className={(this.state.selected ? "choosen" : "")}></a>
              <a href="#" onClick={this.targetValue} className={(this.state.selected ? "choosen" : "")}></a>
              <a href="#" onClick={this.targetValue} className={(this.state.selected ? "choosen" : "")}></a>
            </div>

Проблема здесь в том, что когда я нажимаю на один тег "a", стили применяются к каждомутег "а".Я хочу, чтобы он был применен к нажатому тегу "a".Нужно ли создавать отдельный компонент для каждого тега "a" или есть более правильный способ применения этого тега?

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

проверьте это здесь: https://codesandbox.io/s/9l995oj90p 

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      selected: 0
    };
  }
  targetValue = e => {
    e.preventDefault();
    const { id } = e.target;
    this.setState({ selected: id });
  };
  render() {
    console.log(this.state.selected);
    return (
      <div className="App">
        <a
          href="#"
          id={1}
          onClick={this.targetValue}
          className={this.state.selected === "1" ? "choosen" : ""}
        >
          Joj
        </a>
        <a
          href="#"
          id={2}
          onClick={this.targetValue}
          className={this.state.selected === "2" ? "choosen" : ""}
        >
          Joj
        </a>
        <a
          href="#"
          id={3}
          onClick={this.targetValue}
          className={this.state.selected === "3" ? "choosen" : ""}
        >
          Joj
        </a>
        <a
          href="#"
          id={4}
          onClick={this.targetValue}
          className={this.state.selected === "4" ? "choosen" : ""}
        >
          Joj
        </a>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
0 голосов
/ 17 сентября 2018

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

  1. Создайте список значений (каждое значение будет связано с вашим тегом a) иприсвойте каждому из них идентификатор (это может быть очень простое число, например 0, 1, 2, ...
  2. Измените targetValue так, чтобы при нажатии на тег a вы изменялиselectedItem к идентификатору ссылки, которую вы только что щелкнули.
  3. Вы добавляете choosen className к своей ссылке, если selectedItem соответствует идентификатору
...