react-router v4 Promtの使い方

Question

私のアプリでは、さまざまなページに多数のフォームがあります。保存されていないフォームに変更を加えた場合、ユーザーに警告通知を追加したいと思います。 React Router v4には、この機能が<Promt>で組み込まれているようですが、App Routerコンポーネントとフォーム内に入れてみましたが、エラーReferenceError: formIsHalfFilledOut is not definedが返されました。 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> 
); 

Answer 1

私は理由はなぜこの出来事は、あなたのためにあなたの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>とスタッフについて調べているうちにこの質問が見つかりました