Блог

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

   handleBuild() {
    const from = parseInt(document.getElementById("from").value);
    const to = parseInt(document.getElementById("to").value);
    let newSquares = [];
    for (let i = from; i <= to; i = i   0.5) {
      if (i.toString().includes(".")) {
        newSquares.push(i.toString().split(".", 1)   ":30");
      } else {
        newSquares.push(i.toString());
      }
    }
    this.setState({ squares: newSquares });
  }

  render() {
    const items = this.state.squares.map((item) => (
      <div
        name={item}
        onClick={() => this.handleColor}
        className="squares"
        key={item}
      >
        <h4>{item}</h4>
      </div>
    ));
  

Мне интересно, как handleColor должна выглядеть моя функция? У меня есть состояние, которое я могу использовать для изменения цвета, но сначала я хочу знать, как изменить цвет динамически создаваемого DIV в react? Какую информацию я должен передать функции, чтобы выбрать этот DIV и изменить его свойства стиля при нажатии?

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

Вам нужно передать индекс элемента массива, чтобы идентифицировать элемент в массиве. В функции handleColor извлеките этот элемент из массива и обновите на основе индекса и обновите состояние.

 handleColor = (index) => {
  const squares = this.state.squares
  const item = this.state.squares[index]
  item.color = "#fff" // any random color
  squares[index] = item
  this.setState({
    squares
   })

const items = this.state.squares.map((item,index) => (
  <div
    name={item}
    style={{ color: item.color}}
    onClick={(index) => this.handleColor(index)}
    className="squares"
    key={item}
  >
    <h4>{item}</h4>
  </div>
));