表单验证不适用于使用 mui 使用mui-places-autocomplete的反应

Question

我正在使用材料UI React，Redux-Form，Repalidate和Mui-Places-Autocomplete使用Google Placs API实现自动完成组件。我已经设法实现了位置的查找，但是我似乎无法像使用其余的输入那样处理错误处理。

另外，每当我在字段中键入某些东西并从下拉列表中选择一个位置，清除字段并单击它，它将重置为其所拥有的最后一个值，而不是让字段空白并显示错误。p>我尝试使用React-Place AutoComplete，并且可以按预期工作，但是它缺乏我需要的材料设计，因此这并不是真正的选择。

由于MUI-Places-AutoComplete有几个道具，包括TextfieldProps，因此应该有一种方法来利用文本字段中的错误道具并使用它，但是我不确定该怎么做。

这是我的代码，以防它有助于显示我要完成的工作。

placeinput.jsx

import React, { Component } from 'react';
import MUIPlacesAutocomplete from 'mui-places-autocomplete';
import Script from 'react-load-script';
/* MUI Components */
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
class PlaceInput extends Component {
  state = {
    scriptLoaded: false
  }
  handleScriptLoad = () => {
    this.setState({
      scriptLoaded: true
    })
  }
  render() {
    const { onSuggestionSelected, createAutocompleteRequest, meta: { touched, error }, ...other } = this.props;
    return (
      <FormControl error={touched && !!error} margin="normal" fullWidth>
        <Script
          url="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"
          onLoad={this.handleScriptLoad}
        />
        {
          this.state.scriptLoaded &&
          <MUIPlacesAutocomplete
            onSuggestionSelected={onSuggestionSelected}
            createAutocompleteRequest={createAutocompleteRequest}
            renderTarget={() => (<div />)}
            textFieldProps={{ ...other }}
          />
        }
        {
          touched &&
          error &&
          <FormHelperText style={{ color: '#f44336' }}>{error}</FormHelperText>
        }
      </FormControl>
    )
  }
}
export default PlaceInput;

eventform.jsx

/*global google*/
import { reduxForm, Field } from 'redux-form';
import { composeValidators, combineValidators, isRequired, hasLengthGreaterThan } from 'revalidate';
import { geocodeBySuggestion } from 'mui-places-autocomplete';
/* Form Inputs */
import PlaceInput from '../../../app/common/form/PlaceInput';

const validate = combineValidators({
  title: isRequired({ message: 'The event title is required' }),
  category: isRequired({ message: 'Please provide a category' }),
  description: composeValidators(
    isRequired({ message: 'Please enter a description' }),
    hasLengthGreaterThan(4)({ message: 'Description needs to be at least 5 characters' })
  )(),
  city: isRequired('City'),
  venue: isRequired('Venue'),
  date: isRequired('Date')
});
class EventForm extends Component {
  state = {
    cityLatLng: {},
    venueLatLng: {},
    scriptLoaded: false
  }
  createAutocompleteRequestForCities = (inputValue) => {
    return {
      input: inputValue,
      types: ['(cities)']
    }
  }
  createAutocompleteRequestForEstablishments = (inputValue) => {
    return {
      input: inputValue,
      types: ['establishment'],
      location: new google.maps.LatLng(this.state.cityLatLng),
      radius: 1000
    }
  }
  handleScriptLoad = () => {
    this.setState({
      scriptLoaded: true
    })
  }
  render() {
    const { classes, invalid, submitting, pristine } = this.props;
    return (
   <form onSubmit={this.props.handleSubmit(this.onFormSubmit)}>
      <Field
        fullWidth
        onSuggestionSelected={this.onSuggestionSelectedCity}
        createAutocompleteRequest={this.createAutocompleteRequestForCities}
        name="city"
        helperText="Required field"
        component={PlaceInput}
        label="Event City"
       />
      {
       this.state.scriptLoaded &&
       <Field
         fullWidth
         onSuggestionSelected={this.onSuggestionSelectedVenue}
         createAutocompleteRequest {this.createAutocompleteRequestForEstablishments}
         name="venue"
         helperText="Required field"
         component={PlaceInput}
         label="Event Venue"
        />
       }          
    )
  }
}
EventForm.propTypes = {
  classes: PropTypes.object.isRequired,
};
const mapStateToProps = (state, ownProps) => {
  const eventId = ownProps.match.params.id;
  let event = {};
  if (eventId && state.events.length > 0) {
    event = state.events.filter(event => event.id === eventId)[0];
  }
  return {
    initialValues: event
  }
}
const actions = {
  createEvent,
  updateEvent,
  deleteEvent
}
export default compose(
  connect(mapStateToProps, actions),
  reduxForm({ form: 'reduxForm', enableReinitialize: true, validate }),
  withStyles(styles)
)(EventForm);

Answer 1

我没有答案，但是您忘了删除Google API键，请小心