TypeError: Невозможно прочитать свойство 'style' для null в event.target - PullRequest
Новая
       15

TypeError: Невозможно прочитать свойство 'style' для null в event.target

0 голосов
/ 12 января 2020

Я вложил event.target в пользовательскую функцию. 

_buttonPublish = (event) => {
  var TreeMap = this.state.TreeMap;
  this.state.ObjectTree.forEach(item => {
    TreeMap.push(this._parseItemToTreeMap(item));
    this.setState({
      TreeMap: TreeMap,
      publish: true
    }, () => {
      event.target.style.top = item.position.y;
      event.target.style.left = item.position.x;
    });
  });
}

<button type="button" onClick={(e) => this._buttonPublish(e)} style={{width: 200, height: 100}}>
      Publish!
    </button>

Почему стиль не определен?

1 Ответ

1 голос
/ 12 января 2020

Чтобы использовать синтаксическое событие React c в асинхронном контексте setState, я должен был вызвать event.persist() для него. Это позволяет вам получить доступ к event в setState обратном вызове: 

// this function just simulates the properties you seem to have on `ObjectTree`'s elements
function makeTreeItem() {
  function randint(min, max) {
    return Math.round(Math.random() * Math.abs(max - min) + min);
  }
  return {
    position: {
      x: `${randint(0, 100)}px`,
      y: `${randint(0, 100)}px`
    }
  };
}

class App extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      ObjectTree: [
        makeTreeItem(),
        makeTreeItem(),
        makeTreeItem(),
        makeTreeItem()
      ]
    };
  }
  handleClick = event => {
    event.persist();
    this.state.ObjectTree.forEach(item => {
      this.setState(
        {
          publish: true
        },
        () => {
          // access and adjust the event `target`'s position
          event.target.style.top = item.position.y;
          event.target.style.left = item.position.x;
        }
      );
    });
  };
  render() {
    return (
      <div style={{ position: "relative" }}>
        <button onClick={this.handleClick} style={{ position: "absolute" }}>
          Publish!
        </button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Здесь определенно кажется, что чего-то здесь не хватает в отношении вашего желаемого результата, ie вы устанавливаете положение кнопки на основе позиционных свойств последнего элемент в вашем массиве state.ObjectTree: по моему мнению, это очень запутанный шаблон пользовательского интерфейса, но, по крайней мере, теперь вы должны иметь доступ к event.

...