Компонент автозаполнения пользовательского интерфейса материала с формой Redux - PullRequest
Новая
       43

Компонент автозаполнения пользовательского интерфейса материала с формой Redux

0 голосов
/ 13 февраля 2020

Проблема заключается в следующем: я использую компонент автозаполнения UI материала (https://material-ui.com/api/autocomplete/) в форме Redux. Компонент автозаполнения предоставляется со списком параметров, где каждый параметр является объектом, содержащим свойство "@id" и некоторые другие удобочитаемые свойства, в зависимости от ресурса.

Компонент передается через "getOptionLabel msgstr "опора для создания меток опций из читаемых свойств. После ввода / выбора любой метки из списка, предоставленного автозаполнением, метка преобразуется во входное значение и, таким образом, сохраняется в хранилище как значение поля формы-редукса.

Проблема: компонент автозаполнения должен предоставить избыточную форму со значением, отличным от значения, указанного на этикетке. Однако пока я не могу сделать это каким-то простым способом. Я уверен, что это возможно, но на этом этапе я также уверен, что я не понимаю, какая комбинация компонентов поддерживает такой сценарий.

На данный момент мне удалось использовать ChildContextTypes в сама форма, чтобы передать отправку изменения в избыточной форме (https://redux-form.com/8.2.2/docs/api/actioncreators.md/# -code-change-form-string-field-string-value-any-code- ) компоненту автозаполнения. Таким образом, я могу указать в компоненте автозаполнения событие onChange, которое будет обрабатывать переключение значений.

Текущий код: 

export class AutocompleteField extends React.Component {
  constructor(props, context) {
        super(props);

        this.state = {
            options: [],
            selectedValue: null,
        };
    }
  static contextTypes = {
        changeFieldValue: PropTypes.func.isRequired
    };
  componentDidMount() {
        this.fetchLabels();
    }
  fetchLabels() {
       // call api, setState({options: resulst of api call })
    }
  componentDidUpdate(prevProps, prevState, snapshot) {
        if (!this.state.selectedValue) {
            return;
        }
        this.context.changeFieldValue(`example_field`, `${this.state.selectedValue["@id"]}`);
    }
  changeLabelToIRI(event, value) {
        this.setState({selectedValue: value})
    }
  getOptionsLabels(option) {
    // format option labels according to resource
  }
  render() {
      const {input} = this.props;
      return(
        <Autocomplete
                    options={this.state.options}
                    getOptionLabel={option => (this.getOptionLabels(option))}
                    onChange={(event, value ) => this.changeLabelToIRI(event, value)}
                    renderInput={params => (
                        <TextField
                            {...params}
                            {...input}
                        />
                    )}
                />
      )
  }
}

Можно действительно использовать некоторые советы о том, как сделать его проще .

...