Как в реакте по клику мыши создать элемент?

Question

[Марат Иванов]

Есть элемент, внутри которого вызывается функция addPoint по клику на button.
Выходит ошибка "TypeError: mouseCoordsLayer.createElement is not a function"

addPoint = (e) => {
        e.preventDefault();
        e.stopPropagation();
        const mouseCoordsLayer = this.pageRefs.current;
        const coordinate = [];
        console.log('click1');
        let point = mouseCoordsLayer.createElement("div");
    
        coordinate.push([this.MouseCoords.getX(e), this.MouseCoords.getY(e)]);
        }

    };

Comments

[Роман Александрович]

https://codepen.io/antonietta/pen/KzxxWN

Answer 1

[Антон Спирин]

1. Метод createElement реализован в объекте document.
2. Подобные способы создания элементов в React разарботке лучше не использовать. Работайте с данными и рендерите компоненты на их основе.

Answer 2

[0xD34F]

Что пофиксить, подскажите плиз.

Ничего, полностью переписать:

.points {
  position: relative;
  height: 400px;
  border: 1px solid silver;
  overflow: hidden;
}

.point {
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  background: red;
}

class App extends React.Component {
  state = {
    points: [],
  }

  addPoint = ({ nativeEvent: { offsetX, offsetY } }) => {
    this.setState(({ points }) => ({
      points: [ ...points, {
        x: offsetX - 10,
        y: offsetY - 10,
      } ],
    }));
  }

  render() {
    return (
      <div className="points" onClick={this.addPoint}>
        {this.state.points.map(n => (
          <div className="point" style={{
            left: `${n.x}px`,
            top: `${n.y}px`,
          }}
          ></div>
        ))}
      </div>
    );
  }
}

Comments

[Марат Иванов]

Спасибо!