如何使用react-router v4 Promt

在我的应用程序中，我在不同的页面上有许多表单。如果用户对未保存的表单进行了更改，我希望向用户添加警报通知。 React路由器v4似乎有内置<Promt>这个功能，但是，我试过把它放在我的App Router组件和表格内，它返回一个错误ReferenceError: formIsHalfFilledOut is not defined。如何使用这个正确如何使用react-router v4 Promt

EG：Wihtin form

render() { 
    return (
    <Form className="languageForm" onSubmit={this.handleFormSubmit}> 
     <SingleInput inputType={'text'} controlFunc={this.handleLanguageChange(language.uniqueId)} content={language.language} placeholder={'Language'} bsSize={null} error={language.errors && language.errors.language}/> 
     <input type="submit" className="btn btn-primary" value="Save"/> 
     <Prompt when={formIsHalfFilledOut} message="Are you sure you want to leave?"/> 
    </Form> 
); 
}

EG：Within App.jsx

const App = appProps => (
    <Router> 
    <Prompt when={formIsHalfFilledOut} message="Are you sure you want to leave?"/> 
    <NavBar {...appProps}/> 
    <Grid className="main-page-container"> 
     <Switch> 
     <Authenticated exact path="/" component={Home} {...appProps}/> 
     <Authenticated exact path="/admin/profile_candidate/edit/contact_details" component={ContactDetailsFormContainer} {...appProps}/> 
     <Authenticated exact path="/admin/profile_candidate/edit/summary" component={SummaryFormContainer} {...appProps}/> 
     <Route render={function() { 
      return <p>Page not found</p>; 
     }}/> 
     </Switch> 
    </Grid> 
    </Router> 
);

来源

2017-07-03 bp123

我认为，之所以会出现这种情况，是因为你不声明你的formIsHalfFilledOut变量。

这个变量的名字（据我所知）是这样设置的，这意味着当你填充某些表单/字段等，但通过链接离开时，可能还没有完成。

Codepen例如： https://codepen.io/anon/pen/qxQKOZ

代码：

const { 
    HashRouter, 
    Switch, 
    Route, 
    Link, Prompt 
} = ReactRouterDOM 

class YourForm extends React.Component { 
    constructor(){ 
    super(); 

    this.state = { 
     formIsHalfFilledOut: false, 
     value: '' 
    } 

    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(event){ 
    event.preventDefault(); 

    let value = event.target.value; 

    this.setState((prevState)=>{ 
     let isNotFilled = (value === ''); 
     return { 
      formIsHalfFilledOut: !isNotFilled, 
      value: value 
     } 
    }); 
    } 

    render() { 
    const {title} = this.props; 

    return (
     <div> 
       <Prompt when={this.state.formIsHalfFilledOut} message="Are you sure?"/> 
     <h2>{title}</h2> 
     <input value={this.state.value} onChange={this.handleChange}/> 
     <div> 
      <Link to="/">Some link</Link> 
     </div> 
     </div> 
    ); 
    } 
} 

ReactDOM.render((
    <HashRouter> 
    <YourForm title="I'm the form" /> 
    </HashRouter> 
), document.getElementById('root'))

P.S. 现在可能要晚了，但我在研究约<Prompt>和东西时发现了这个问题

来源

2018-02-27 12:09:35 DanilGholtsman

如何使用react-router v4 Promt

回答

相关问题