Question

我正在努力掌握一个反应概念，对我来说，它可能一直在使用。

我有一个带有状态的应用程序。我在应用下方有一个部分。在下面的部分中，我具有可点击的图块，该图块具有用于更新应用状态的功能。这可行，但是event.target似乎为空。

我正在传递该功能以从应用程序一直向下更新状态作为道具。

我该如何解决/我缺少什么？

    import React, { Component } from 'react';
import './App.css';

const Section = ({ handleClick }) => {

  return (
    <div className="section">
      Section
      <Tile handleClick={handleClick} title="1" />
      <Tile handleClick={handleClick} title="2" />
      <Tile handleClick={handleClick} title="3" />
    </div>
  )
}

const Tile = ({ handleClick, title }) => {

  return (
    <div className="tile" onClick={handleClick}>
      tile {title}
    </div>
  )
};

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalOpen: false
    };
  }

  openModal = () => {
    this.setState({
      modalOpen: true,
      openedBy: ""
    })
  }

  closeModal = (event) => {
    this.setState({
      modalOpen: false,
      openedBy: event.target.title

    })
  }

  render() {
    return (
      <div className="App">
        <div>ModalOpen = {this.state.modalOpen.toString()}</div>
        <div>Opened by = {this.state.openedBy}</div>
        <Section handleClick={this.openModal}></Section>
        <a href="#" onClick={this.closeModal}>Close modal</a>
      </div>
    );
  }
}

export default App;

非常感谢指针在正确的方向！

Answer 1

您不是将title道具传递给Tile组件，而是将number道具传递给了

。

您可以在Tile组件中创建一个新函数，该组件使用handleClick调用number，然后将其用于在{{1 }}。

示例

openedBy

App

Answer 2

似乎工作得很好：

const Section = ({ handleClick }) => {

  return (
    <div className="section">
      Section
      <Tile handleClick={handleClick} number="1" />
      <Tile handleClick={handleClick} number="2" />
      <Tile handleClick={handleClick} number="3" />
    </div>
  )
}

const Tile = ({ handleClick, title }) => {

  return (
    <div className="tile" onClick={handleClick}>
      tile {title}
    </div>
  )
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modalOpen: false
    };
  }

  openModal = event => {
    console.log(event.target)
    this.setState({
      modalOpen: true,
      openedBy: ""
    })
  }

  closeModal = event => {
    console.log(event.target)
    this.setState({
      modalOpen: false,
      openedBy: event.target.title

    })
  }

  render() {
    return (
      <div className="App">
        <div>ModalOpen = {this.state.modalOpen.toString()}</div>
        <div>Opened by = {this.state.openedBy}</div>
        <Section handleClick={this.openModal}></Section>
        <a href="#" onClick={this.closeModal}>Close modal</a>
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>
<div id='root'>

但是，我假设您想将clicked元素的标题传递回处理程序。如果是这样，我建议使用带有2组参数的curried函数，并将title变量设置为第一个：

  openModal = title => event => {
    console.log('Opened by : ', title, event.target)
    this.setState({
      modalOpen: true,
      openedBy: ""
    })
  }

您的Tile组件现在可以通过第一次调用该函数来指示其标题：

const Tile = ({ handleClick, title }) => {

  return (
    <div className="tile" onClick={handleClick(title)}>
      tile {title}
    </div>
  )
};

工作示例：

const Section = ({ handleClick }) => {

  return (
    <div className="section">
      Section
      <Tile handleClick={handleClick} title="1" />
      <Tile handleClick={handleClick} title="2" />
      <Tile handleClick={handleClick} title="3" />
    </div>
  )
}

const Tile = ({ handleClick, title }) => {

  return (
    <div className="tile" onClick={handleClick(title)}>
      tile {title}
    </div>
  )
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modalOpen: false
    };
  }

  openModal = title => event => {
    console.log('Opened by : ', title)
    this.setState({
      modalOpen: true,
      openedBy: ""
    })
  }

  closeModal = event => {
    this.setState({
      modalOpen: false,
      openedBy: event.target.title

    })
  }

  render() {
    return (
      <div className="App">
        <div>ModalOpen = {this.state.modalOpen.toString()}</div>
        <div>Opened by = {this.state.openedBy}</div>
        <Section handleClick={this.openModal}></Section>
        <a href="#" onClick={this.closeModal}>Close modal</a>
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>
<div id='root'>

向下传递反应功能给孩子，event.target为空

2 个答案: