Автозаполнение React Redux Material-UI - PullRequest
Новая
       26

Автозаполнение React Redux Material-UI

0 голосов
/ 09 января 2020

Я изо всех сил пытаюсь получить значение из автозаполнения Material-ui при использовании redux-формы. Кто-нибудь решил это? Я использую точный пример из Material-UI Autocomplete https://material-ui.com/components/autocomplete/ Я могу видеть параметры списка, и он заполняется после двойного нажатия на него, но я не могу извлечь реальное значение, вместо этого я возвращая ({ title : 0 }) вместо значения. 

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { Field, reduxForm } from "redux-form";
import { connect } from "react-redux";

class Form extends React.Component {
  onSubmit = formValues => {
    console.log(formValues);
  };

  renderTextField = ({
    label,
    input,
    meta: { touched, invalid, error },
    ...custom
  }) => (
    <Autocomplete
      label={label}
      options={this.props.movies}
      placeholder={label}
      getOptionLabel={option => option.title}
      onChange={input.onChange}
      {...input}
      {...custom}
      renderInput={params => (
        <TextField {...params} label={label} variant="outlined" fullWidth />
      )}
    />
  );

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

    return (
      <div>
        <form onSubmit={handleSubmit(this.onSubmit)}>
          <Field
            name="propertySelector"
            component={this.renderTextField}
            label="Select Property"
            type="text"
          />
        </form>
      </div>
    );
  }
}
const mapStateToProps = state => {
  console.log(state);
  return {
    movies: [
      { title: "The Shawshank Redemption", year: 1994 },
      { title: "The Godfather", year: 1972 },
      { title: "Schindler's List", year: 1993 }
    ]
  };
};

Form = reduxForm({
  form: "auto_complete"
});

export default connect(mapStateToProps, null)(Form);

1 Ответ

1 голос
/ 05 февраля 2020

Решается передачей (событие, значение) реквизиту onChange. 

onChange={(event, value) => console.log(value)}

Из документов; 

Callback fired when the value changes.

Signature:
function(event: object, value: T) => void
event: The event source of the callback.
value: null
...