Поддерживать как значение, так и метку от компонентаact-select в состоянии приставки - PullRequest
Новая
       35

Поддерживать как значение, так и метку от компонентаact-select в состоянии приставки

0 голосов
/ 08 июня 2018

A Выбранный компонент в реакции выбора поддерживает состояние как в значениях label, так и value.Совет, который я видел на сегодняшний день по интеграции этого компонента в форму в форме редукса, рекомендует перезаписать поведение по умолчанию response-select onChange и onBlur, которое неявно передается из родительского компонента формы редукса.Например ... 

<Field component{SelectWrapper} />

class SelectWrapper extends React.Component {
    onChange = event => {
       if (this.props.input.onChange && event != null) {
          this.props.input.onChange(event.value);
       } else {
          this.props.input.onChange(null);
       }
    }
    render() {
         <AsyncCreatableSelect 
           {...this.props}
           onChange={this.onChange}
           onBlur={() => this.props.input.onBlur(this.props.input.value)}
         />
    }
}

Я хотел бы заполнить компонент <Select /> из хранилища MongoDB, используя _id документа в качестве value и свойство name в качестве label,Затем при выборе другой опции я бы хотел видеть name в поле выбора, сохраняя значение id в качестве значения.Это делается для того, чтобы пользователь мог выбирать из значимых элементов, в то время как у меня могут быть некоторые гарантии при отправке формы и отправке ее обратно в хранилище данных.Есть ли хороший или правильный способ сделать это?

Мой код пока ... 

// CustomerSelect.js
import React from "react";
import { Field } from "redux-form";
import Grid from "material-ui/Grid";
import renderAsyncCreatableSelect from "../redux-form-connectors/renderAsyncCreatableSelect";

const CustomerSelect = ({ customers,  selectedCustomer }) => {
    // customers: [{name: "Alice", _id: "$7637221n...}, ...]
    const options = customers.map(customer => ({
      label: customer,
      value: customer
    }));
    return (
      <Grid item>
        <Field
          name="customer"
          component={renderAsyncCreatableSelect}
          label="Customer"
          selectedValue={selectedCustomer}
        />
      </Grid>
    );
  };

// renderAsyncCreatableSelect.js
import React, { Component } from "react";
import axios from "axios";
import AsyncCreatableSelect from "react-select/lib/AsyncCreatable";

const getOptions = () => {
  return axios
    .get("/api/customers") // [{_id: "", name: "", user: ""... }, ...]
    .then(res => res.data.map(el => ({ label: el.name, value: el._id })));
};

export default class renderAsyncCreatableSelect extends Component {
  onChange = (event) => {
    if (this.props.input.onChange && event != null) {
      this.props.input.onChange(event.value);
    } else {
      this.props.input.onChange(null);
    }
  };


  render() {
    const { input, selectedValue } = this.props;

    return (
      <AsyncCreatableSelect
        cacheOptions
        defaultOptions
        placeholder={"Customer..."}
        loadOptions={getOptions}
        value={input.value ? input.value : selectedValue.label}
        onBlur={() => input.onBlur(input.value)}
        onChange={this.onChange}
      />
    );
  }
}

1 Ответ

0 голосов
/ 08 июня 2018

Ваша функция onchange должна выглядеть как 

onChange = (event) => {
    if (this.props.input.onChange && event.target.value != null) {
      this.props.input.onChange(target.value);
    } else {
      this.props.input.onChange(null);
    }
  };

или если вы используете избыточность из поля 

onChange = (event, value) => {
        if (this.props.input.onChange && value != null) {
          this.props.input.onChange(value);
        } else {
          this.props.input.onChange(null);
        }
      };
...