React Select 与 Redux React 形式
React Select with Redux React form
我正在尝试将 react-select 与 react redux 形式集成 (https://github.com/davidkpiano/react-redux-form)
这是我当前的组件设置,我正在将道具从另一个组件传递给它。
...
<MultiSelect model="event.category" options={this.props.categoryList} />
...
多个select组件
import React, {Component} from 'react';
import {Control} from 'react-redux-form';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
class MultiSelect extends Component {
constructor(props) {
super(props);
this.state = {categoryValue: []};
}
handleSelectChange = value => {
this.setState({categoryValue: value});
};
render() {
let reactSelect = props => (
<Select
{...props}
/>
);
return (
<div className="form__row">
<div className="form__label">
<span className="form__title">
{this.props.title}
{this.props.isRequired ? (
<span className="form__required">*</span>
) : (
''
)}
</span>
</div>
<Control.custom
model={this.props.model}
id={this.props.model}
component={reactSelect}
simpleValue
multi
value={this.state.categoryValue}
options={this.props.options}
onChange={this.handleSelectChange}
joinValues
name={this.props.model}
required
/>
</div>
);
}
}
export default MultiSelect;
我的问题是我似乎无法在我的 React redux 表单状态中获取隐藏文本字段的值。我可能缺少什么?
If you do not want any standard property mappings (such as onChange,
onBlur, etc.) passed down to your custom control component, use
and define your own mappings:
<Control.custom
component={SpecialCustomText}
mapProps={{
onTextChange: (props) => props.onChange,
onLoseFocus: (props) => props.onBlur,
// etc.
}}
/>
此外,您需要一个提交按钮,您可以在该按钮上从您创建的 MultiSelect
组件中检索值。
我已进行更改以在您的 codesandbox here
中反映这些更改
我正在尝试将 react-select 与 react redux 形式集成 (https://github.com/davidkpiano/react-redux-form)
这是我当前的组件设置,我正在将道具从另一个组件传递给它。
...
<MultiSelect model="event.category" options={this.props.categoryList} />
...
多个select组件
import React, {Component} from 'react';
import {Control} from 'react-redux-form';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
class MultiSelect extends Component {
constructor(props) {
super(props);
this.state = {categoryValue: []};
}
handleSelectChange = value => {
this.setState({categoryValue: value});
};
render() {
let reactSelect = props => (
<Select
{...props}
/>
);
return (
<div className="form__row">
<div className="form__label">
<span className="form__title">
{this.props.title}
{this.props.isRequired ? (
<span className="form__required">*</span>
) : (
''
)}
</span>
</div>
<Control.custom
model={this.props.model}
id={this.props.model}
component={reactSelect}
simpleValue
multi
value={this.state.categoryValue}
options={this.props.options}
onChange={this.handleSelectChange}
joinValues
name={this.props.model}
required
/>
</div>
);
}
}
export default MultiSelect;
我的问题是我似乎无法在我的 React redux 表单状态中获取隐藏文本字段的值。我可能缺少什么?
If you do not want any standard property mappings (such as onChange, onBlur, etc.) passed down to your custom control component, use and define your own mappings:
<Control.custom
component={SpecialCustomText}
mapProps={{
onTextChange: (props) => props.onChange,
onLoseFocus: (props) => props.onBlur,
// etc.
}}
/>
此外,您需要一个提交按钮,您可以在该按钮上从您创建的 MultiSelect
组件中检索值。
我已进行更改以在您的 codesandbox here
中反映这些更改