reactjs - 通过单击在另一个组件中呈现的元素来打开 <Modal>

Question

我正在使用一组Semantic UI <Item> 组件来列出一堆产品。我希望能够在 <Item> 时编辑产品的详细信息单击，我认为实现此目的的最佳方法是使用 <Modal> 组件。

我希望尽可能将所有内容拆分为可重用的组件。

(注意:我故意省略了一些 import 语句，以方便阅读。)

App.js

import { ProductList } from 'components';

const App = () => (
  <Segment>
    <Item.Group divided>
      <ProductList/>
    </Item.Group>
  </Segment>
)

export default App;

组件/ProductList.js

import { ProductListItem } from '../ProductListItem';

export default class ProductList extends Component {
  constructor() {
    super()
    this.state = { contents: [] }
  }

  componentDidMount() {
    var myRequest = new Request('http://localhost:3000/contents.json');
    let contents = [];

    fetch(myRequest)
    .then(response => response.json())
    .then(data => {
      this.setState({ contents: data.contents });
    });

    this.setState({ contents: contents });
  }

  render() {
    return (
      this.state.contents.map(content => {
        return (
          <ProductListItem
            prod_id={content.prod_id}
            prod_description={content.prod_description}
            category_description={content.category_description}
          />
        );
      })
    )
  }
}

组件/ProductListItem.js

export default class ProductListItem extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Item key={`product-${this.props.prod_id}`} as='a'>
        <Item.Content>
          <Item.Header>{this.props.prod_description}</Item.Header>
          <Item.Description>
            <p>{this.props.prod_description}</p>
          </Item.Description>
        </Item.Content>
      </Item>
    )
  }
}

所有这些都运行良好，并且产品列表按其应有的方式显示。

我还使用 Modal docs 中的示例之一创建了一个基本模态组件。 :

组件/ModalExampleControlled.js

export default class ModalExampleControlled extends Component {
  state = { modalOpen: false }

  handleOpen = () => this.setState({ modalOpen: true })
  handleClose = () => this.setState({ modalOpen: false })

  render() {
    return (
      <Modal
        trigger={<Button onClick={this.handleOpen}>Show Modal</Button>}
        open={this.state.modalOpen}
        onClose={this.handleClose}
        size='small'
      >
        <Header icon='browser' content='Cookies policy' />
        <Modal.Content>
          <h3>This website uses cookies etc ...</h3>
        </Modal.Content>
        <Modal.Actions>
          <Button color='green' onClick={this.handleClose}>Got it</Button>
        </Modal.Actions>
      </Modal>
    )
  }
}

因此，这将创建一个按钮，无论 <ModalExampleControlled /> 处都显示知道了被渲染，并且按钮导致模态出现 - 太棒了。

当 <Item> 之一出现时，如何让模式出现？单击产品列表中的元素(从而摆脱按钮)？

非常感谢您的宝贵时间。

克里斯

Answer 1

您的问题是当前模式在内部管理其自己的状态。只要是这种情况并且没有其他组件可以访问该状态，您就无法从外部触发模态组件。

有多种方法可以解决这个问题。最好的方法取决于您的应用程序的设置方式。听起来最好的方法是用一个从高阶组件传递到模态的 prop 替换内部模态状态，该组件还将打开/关闭函数传递给相关的子组件:

// Modal.js
export default class ModalExampleControlled extends Component {
  render() {
    return (
      { this.props.open ?
      <Modal
        open={this.props.open}
        onClose={this.props.handleClose}
        size='small'
      >
        <Header icon='browser' content='Cookies policy' />
        <Modal.Content>
          <h3>This website uses cookies etc ...</h3>
        </Modal.Content>
        <Modal.Actions>
          <Button color='green' onClick={this.props.handleClose}>Got it</Button>
        </Modal.Actions>
      </Modal>
      : null }
    )
  }
}

// App.js
import { ProductList } from 'components';

class App extends Component  {
    handleOpen = () => this.setState({ open: true })
    handleClose = () => this.setState({ open: false })
    render(){
        return(
           <Segment>
             <Item.Group divided>
               <ProductList/>
             </Item.Group>
             <Modal open={this.state.open} closeModal={() => this.handleClose()}}
          </Segment>
        )
    }
}

export default App;

请记住，这段代码只是示例性的，尚未完成。基本思想是:您需要将控制权交给最高父组件，该组件位于需要访问它的所有其他组件之上。这样您就可以在需要时将打开/关闭函数传递给子级并控制模态状态。

如果有很多这样的传递，这可能会变得难以处理。如果您的应用程序变得非常复杂，它将成为状态管理的问题。当发生很多事情时，像 Redux 这样的模式可能有助于管理各地不断变化的状态(例如模态)。不过，就您而言，这可能是找到的。