Question

我正在使用材料ui react，redux-form，revalidate和mui-places-autocomplete来实现使用Google Places API的自动完成组件。我已经设法实现了位置查找，但是似乎无法像其他输入一样使错误处理正常工作。

此外，每当我在该字段中键入内容并从下拉列表中选择一个位置时，清除该字段并单击即可，它将重置为它具有的最后一个值，而不是将字段留空并显示错误。

我尝试使用react-places自动完成功能，并且可以按预期工作，但是它缺少我需要的材料设计，因此这并不是一个选择。

由于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密钥，请注意

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

1 个答案: