！JSX

Question

我正在尝试将删除按钮的功能移动到模式中，因此用户应该在删除单击之前得到确认。如果我打开检查器，我可以通过更改CSS中的 显示：无 来手动显示它，但我认为这就是实现库正在为我处理。

当我点击模式时，我看到它出现在 地址栏 中，所以我假设 react-router 正在劫持模态

我可以替换确切路径以匹配 / modal2 ，但是我应该将其发送到新的组件？或者将其发送回相同的组件，并为模态设置属性？

```

！JSX

import React from 'react';
import { Switch, Route} from 'react-router-dom';
import Barrels from './Barrels';
import About from './About';
import BarrelDetails from './BarrelDetails';
import AddBarrel from './AddBarrel';
import BarrelEdit from './BarrelEdit';

const Main = () => (
    <main className="green">
    <Switch>
    <Route exact path= '/' component={Barrels} />
    <Route exact path= '/about' component={About} />
    <Route exact path= '/barrels/add' component={AddBarrel} />
    <Route exact path= '/barrels/edit/:id' component={BarrelEdit} />
<Route exact path= '#modal2' component={BarrelEdit     //modal component propperty turned on?//               } />
    <Route exact path= '/barrels/:id' component={BarrelDetails} />
    </Switch>
    </main>
    )

export default Main;

```
live demo on Heroku

Repository on BitBucket
或者我应该尝试将模态触发器移动到on onDelete 函数上？

```

！JSX

import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import logo from '../logo.svg';
class BarrelDetails extends Component {
    constructor (props){
       super(props);
       this.state = {
        details: ''
    }
}

componentWillMount(){
    this.getBarrel();    
}

getBarrel(){
    let barrelID = this.props.match.params.id;
    axios.get(`/api/Barrels/${barrelID}`)
    .then (response => {
      this.setState({details: response.data}, () =>
      {
        console.log(this.state);
      })
    })
    .catch(err => console.log(err));
  }

onDelete(){
    let barrelID = this.state.details.id;
    axios.delete(`/api/Barrels/${barrelID}`)
    .then ( response => {
        this.props.history.push('/');
    } ).catch(err => console.log(err));
}

render () {
    return (
        <div className = "container" >

        <header className="App-header z-depth-3">
        <h2>{this.state.details.Name}</h2>
        <Link className = "btn grey" to = "/">back</Link>
        </header>

            <ul className = "collection z-depth-3" >
            <li className = "collection-item" >planted: <b className = "yellow" > {this.state.details.date_planted}</b> </li>
            <li className = "collection-item" >Barrel #: <b className = "yellow" > {this.state.details.barrel_number}</b> </li>
            <li className = "collection-item" ><b className = "yellow" > {this.state.details.contents}</b> </li>
            <li className = "collection-item" >location: <b className = "yellow" > {this.state.details.location}</b> </li>
            <li className = "collection-item" >geolocation: <b className = "yellow" > this.state.details.geoLocaction.toString()</b> </li>
            <li className = "collection-item" >notes: <b className = "yellow" > {this.state.details.notes}</b> </li>
            <li className = "collection-item" >size: <b className = "yellow" > {this.state.details.size}</b> </li>
            <li className = "collection-item" >last checked: <b className = "yellow" > {this.state.details.date_last_checked}</b> </li>
            </ul>
            <button onClick = {this.onDelete.bind(this) } className = "btn red right"><i className ="far fa-trash-alt"></i> Delete this Barrel</button>

        <h5>what that modal do?</h5>

        <Link to={`/barrels/edit/${this.state.details.id}`} className="btn waves-effect z-depth-3"><i className = "fas fa-pencil-alt" ></i> Edit this Barrel</Link>
        <Link to={`#modal2`} className="btn waves-effect red"><i className ="far fa-trash-alt z-depth-3"></i> Delete this Barrel</Link>


        <div id="modal1" className="modal">
          <div className="modal-content">
            <h4>Modal Header</h4>
            <p>A bunch of text</p>
          </div>
          <div className="modal-footer">
            <a href="" className="modal-action modal-close waves-effect waves-green">Button</a>
          </div>
        </div>

        <div id="modal2" className="modal orange">
          <div className="modal-content">
            <h4>Are you sure you want to delete</h4>
            <p>A bunch of text</p>
          </div>
          <div className="modal-footer">
            <a href="" className="modal-action modal-close waves-effect waves-green">Button</a>
          </div>
        </div>



        <p className="App-intro">
        TurtleWolfe.com<br/>
        using LoopBack & React<br/>
        <img src={logo} className="App-logo" alt="logo" />
        </p>

            </div>
           )
}
}

export default BarrelDetails;

```

Answer 1

<Link to={`#modal2`} className="btn waves-effect red">
    <i className ="far fa-trash-alt z-depth-3"></i> 
    Delete this Barrel
</Link>

这是我关注的部分。这不应该是附加到React-Router的<Link>，您应该只使用关闭样式的按钮，然后通过onClick事件触发模态。

你也试图以一种可能不适用于React的方式展示你的模态。您将要设置本地状态dislpayModal: false或类似的状态，然后在渲染中检查该状态，而不是依靠Materalize为您执行此操作。让基于DOM的插件在React环境中工作可能很棘手，但使用状态执行它是这样做的“React方式”。

使用基于DOM构建的JavaScript片段的常见CSS框架的另一个建议是找到已经为您完成此操作的第三方基于React的实现。例如：https://react-materialize.github.io/

删除模式是否会被React-Router劫持？

！JSX

！JSX

1 个答案: