Добавить опору, когда onClick в ReactJS

Question

Я хотел бы изменить текущий цвет элемента li, когда щелкаю по нему.

Как добавить реквизит к элементу (используя карту массива), когда я щелкаю по нему?Я использую styled-компоненты

const Li = styled.li`
  color: ${props => (props.checked ? "red" : "green")};
`;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      items: []
    };
  }

  render() {
    const ShowItems = this.state.items.map((item, index) => {
      return (
        <Li key={index}>
          {item}
          <button onClick={() => this.deleteItemHandler(index)}> Delete</button>
        </Li>
      );
    });

    return (
      <Wrapper>
        <AddItem
          addItemHandler={this.addItem}
          InputValue={this.state.value}
          InputValueHandler={this.inputValue}
        />
        {ShowItems}
      </Wrapper>
    );
  }
}

Answer 1

Попробуйте это

     const Li = styled.li`
       color: ${props => props.checked ? "red" : "green"};
       ;`

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          value: "",
          items: [],
          currentChecked: null
        };
      }

     render() {
        const ShowItems = this.state.items.map((item, index) => {
          return (
            <Li key={index} checked={index === this.state.currentChecked} >
              {item} 
              <button onClick={() => this.setState({currentChecked: index})}>Delete</button >
            </Li >
           )
        })

        return (
          <Wrapper>
            <AddItem
              addItemHandler={this.addItem}
              InputValue={this.state.value}
              InputValueHandler={this.inputValue}
            />
            {ShowItems}
          </Wrapper>
        );

Answer 2

Проверьте этот код, работающий на CodeSandBox

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import styled from "styled-components";

const Li = styled.li`
  color: ${props => (props.checked ? "red" : "green")};
`;

class App extends Component {
  state = {
    value: "",
    items: [],
    selected: -1
  };

  handleChange = e => {
    this.setState({
      [e.currentTarget.name]: e.currentTarget.value
    });
  };

  handleAdd = () => {
    const { items, value } = this.state;
    this.setState({
      items: [...items, value],
      value: ""
    });
  };

  handleRemove = index => {
    const { items, selected } = this.state;
    items.splice(index, 1);
    if (index < selected) index = selected - 1;
    if (index === selected) index = -1;
    if (index > selected) index = selected;
    this.setState({
      items: items,
      selected: index
    });
  };

  handleActiveItem = index => {
    this.setState({ selected: index });
  };

  render() {
    const { value, items, selected } = this.state;
    return (
      <div>
        <input
          type="text"
          value={value}
          name="value"
          onChange={this.handleChange}
        />
        <button
          style={{ margin: "0px 5px" }}
          disabled={!value}
          className="btn btn-sm btn-success"
          onClick={this.handleAdd}
        >
          +
        </button>
        <ul className="li">
          {items.map((item, index) => (
            <Li key={index} checked={selected === index}>
              <span onClick={() => this.handleActiveItem(index)}>{item}</span>
              <button
                style={{ margin: "1px 5px" }}
                className="btn btn-sm btn-danger"
                onClick={() => this.handleRemove(index)}
              >
                X
              </button>
            </Li>
          ))}
        </ul>
      </div>
    );
  }
}

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

Игнорируйте обработчики, если они вам не нужны.Благодаря этим усилиям я узнал о styled-components и открыл CodeSandBox.

РЕДАКТИРОВАТЬ:

• Добавлено <span> inside <li>, чтобы избежать вложенных onClick, ранее <li> (родительский) и <button> (дочерний) обаимел атрибут onClick.Нажатие кнопки «Два» события onClick сработали, что привело к неожиданному поведению в некоторых случаях. Вы должны исправить это в своем коде .
• Добавлена ​​логика, чтобы сохранить элемент выбранным, когда элемент перед его удалением.
• Добавлена ​​проверка кнопки, чтобы избежать добавления пустой строки / элементов в список.
• Также обновлен код CodeSandBox, чтобы отразить вышеуказанные изменения.

Answer 3

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

state ={
 activeIndex: void 0 
}

const Li = styled.li`
   color: ${props => props.checked ? "red" : "green"};
   ;`

deleteItemHandler = (index) => {
  this.setState({
   activeIndex: index
  })
}


render() {
    const ShowItems = this.state.items.map((item, index) => {
      return (
        <Li key={index} checked={index === this.state.activeIndex} > {item} < button onClick={() => this.deleteItemHandler(index)
        }> Delete</button ></Li >
      )
    })

    return (
      <Wrapper>
        <AddItem
          addItemHandler={this.addItem}
          InputValue={this.state.value}
          InputValueHandler={this.inputValue}
        />
        {ShowItems}
      </Wrapper>
    );