我正在使用Google的自动填充API来改进表单中的地址输入。
我正在使用GoogleMapsLoader加载程序,该加载程序会在加载后分派操作:
GoogleMapsLoader.onLoad(function() { store.dispatch(GoogleActions.loaded()); });
在React组件中,我有以下输入:
if (google.status === 'LOADED') { inputGoogle = <div> <label htmlFor={`${group}.google`}>Auto Complete:</label> <input ref={(el) => this.loadAutocomplete(el)} type="text" /> </div>; } else { inputGoogle = ''; }
loadAutocomplete方法(不确定这是否是最好的方法):
loadAutocomplete(ref) { if (!this.autocomplete) { this.search = ref; this.autocomplete = new google.maps.places.Autocomplete(ref); this.autocomplete.addListener('place_changed', this.onSelected); } },
使用下面的答案,我做到了以下几点:
const GoogleReducer = (state = initialState, action) => { switch (action.type) { case 'GOOGLE_LOADED': return Object.assign({}, state, { status: 'LOADED', connection: 'ONLINE' }); case 'GOOGLE_OFFLINE': return Object.assign({}, state, { connection: 'OFFLINE' }); case 'GOOGLE_ONLINE': return Object.assign({}, state, { connection: 'ONLINE' }); default: return state; } }; const GoogleActions = { loaded: () => { return (dispatch) => { dispatch({ type: 'GOOGLE_LOADED', }); }; }, onOnline: () => { return (dispatch) => { window.addEventListener('online', function() { dispatch({ type: 'GOOGLE_ONLINE' }); }); }; }, onOffline: () => { return (dispatch) => { window.addEventListener('offline', function() { dispatch({ type: 'GOOGLE_OFFLINE' }); }); }; } };
内部React组件:
if (google.status === 'LOADED' && google.connection === 'ONLINE') { inputGoogle = <div> <label htmlFor={`${group}.google`}>Auto Complete:</label> <input ref={(el) => this.loadAutocomplete(el)} name={`${group}.google`} id={`${group}.google`} type="text" onFocus={this.clearSearch}/> </div>; } else { inputGoogle = <p>Auto Complete not available</p>; }
到目前为止有效。
您可以使用Navigator对象的onLine方法,返回一个布尔值(true如果在线),则只需在您的react渲染器中添加一条语句。
true
https://developer.mozilla.org/zh- CN/docs/Web/API/NavigatorOnLine/onLine
render(){ var input = navigator.onLine ? <YOUR_FORM_COMPONENT> : null; return( <div> {input} </div> ) }