Как расположить компоненты в месте щелчка мыши в реагировать? - PullRequest
Новая
       33

Как расположить компоненты в месте щелчка мыши в реагировать?

0 голосов
/ 07 апреля 2019

Моя цель - написать код для функциональности, в котором, когда я щелкаю в определенном месте в рамке на экране, в месте щелчка должен отображаться счетчик.

У меня есть компонент Toast (из реактивного ремешка) внутри div, к которому я добавил атрибут onClick, который вызывает функцию markoff при нажатии. То, что делает markoff, это увеличивает нет. меток и добавляет положение координат x и y щелчка в состояние. Наконец, я рендерил массив компонентов Spinner с абсолютной позицией, установленной из состояния, которое было обновлено щелчком мыши. Следовательно, позиция моего клика должна быть местом, где отображается новый компонент Spinner. 

class AddMarkingBox extends Component {
  state = {
    no: 0,
    mark_x: [],
    mark_y: []
  };
  constructor(props) {
    super(props);
    this.markoff = this.markoff.bind(this);
  }

  markoff(e) {
    this.setState({ no: this.state.no + 1 });
    this.setState({ mark_x: [...this.state.mark_x, e.screenX] });
    this.setState({ mark_y: [...this.state.mark_y, e.screenY] });
    console.log(this.state);
  }

  render() {
    const markings = [];
    for (var i = 0; i < this.state.no; i += 1) {
      markings.push(
        <ChildComponent
          key={i}
          xcord={this.state.mark_x[i]}
          ycord={this.state.mark_y[i]}
        />
      );
    }
    return (
      <div>
        <div className="viji" onClick={this.markoff}>
          <Toast>
            <ToastHeader>CLICK!</ToastHeader>
            <ToastBody>Click in this to add components!</ToastBody>
          </Toast>
        </div>
        {markings}
      </div>
    );
  }
}

const ChildComponent = props => (
  <Spinner
    size="sm"
    color="primary"
    style={{
      top: props.ycord + "px",
      left: props.xcord + "px",
      position: "absolute"
    }}
  />
);

Вот скриншот браузера https://drive.google.com/file/d/13OO2WHRN4zAabcA2VNQTLafo3wzvFTvl/view?usp=sharing

Вместо того, чтобы показывать счетчики в той же позиции, что и щелчок мыши, они отображаются с некоторым смещением по x и y. Я пропускаю некоторые концепции позиционирования здесь? Спасибо.

...