Я работаю над библиотекой react-select
и сталкиваюсь с некоторыми проблемами, я использую библиотеку redux-form
и импортирую из нее компонент <Field />
. Чтобы я мог отправлять значения через форму для обслуживания.
Моя проблема:
Ниже упомянутый код работает нормально, когда я использую default от реакции-select. Я могу выбрать значения из раскрывающегося списка, и значение будет выбрано даже при фокусировке, значение останется. Но выбранное значение не отправляется через форму из-за redux-form
, поэтому я обматываю компонент и использую <Field name="sample" component={RenderSelectInput} id="sampleEX" options={options} />
import React from 'react';
import Select from 'react-select';
import RenderSelectInput from './RenderSelectInput'; // my customize select box
var options = [{ value: 'one', label: 'One' }, { value: 'two', label: 'Two' }];
class SelectEx extends React.Component {
constructor() {
super();
this.state = { selectValue: 'sample' }
this.updateValue = this.updateValue.bind(this);
}
updateValue(newValue) {
this.setState({ selectValue: newValue })
}
render() {
return (
<div>
<Select name="select1" id="selectBox" value={this.state.selectValue} options={options} onChange={this.updateValue}/>
//This works but value won't submit ...
<Field name="sample" component={RenderSelectInput} id="sampleEX" options={options} />
//For this, selected value vanishes once I come out of component.
</div>
)
}
}
export default SelectEx;
Но когда я использую мой настроенный выбор (я обертываю, чтобы отправить значение из формы), компонент <Select>
может быть видимым в пользовательском интерфейсе даже для значений. Но не удалось выбрать значение из раскрывающегося списка..., если я выберу его, он отобразится в поле <Select>
, но при фокусировке он исчезнет. Пожалуйста, помогите мне...
Компонент RenderSelectInput:
import React from 'react';
import {Field, reduxForm} from 'redux-form';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
const RenderSelectInput = ({input, options, name, id}) => (
<div>
<Select {...input} name={name} options={options} id={id} />
</div>
)
export default RenderSelectInput;
Спасибо, Шаш