[英]Reactjs and redux-form: Unable to use onChange or onBlur in wrapped react-select component in redux-form
I am using react-select
component, Since I am using redux-form
library and it's fields, I have to wrap the react-select and use it in redux-form field to submit the form values. 我正在使用react-select
组件,因为我正在使用redux-form
库及其字段,所以我必须包装react-select并将其用于redux-form字段中以提交表单值。 Like this <Field name="customselect" component={RenderSelectInput} />
. 像这样的<Field name="customselect" component={RenderSelectInput} />
。 However I am unable to use custom onChange
and onBlur
functions when I used wrapped react-select component. 但是,当我使用包装的react-select组件时,无法使用自定义onChange
和onBlur
函数。 Like this <Field name="customselect" component={RenderSelectInput} onChange={this.handleChange}/>
像这样的<Field name="customselect" component={RenderSelectInput} onChange={this.handleChange}/>
This is RenderSelectInput.js 这是RenderSelectInput.js
import React, {PropTypes} from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
export default (props) => (
<Select {...props}
value = {props.input.value}
onChange = {(value) => props.input.onChange(value) }
onBlur = {() => props.input.onBlur(props.input.value) }
options = {props.options}
);
homepage.js homepage.js
import React, {Component} from 'react';
import { Field, reduxForm} from 'redux-form';
import RenderSelectInput from './RenderSelectInput';
class homepage extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
alert("success");
}
render() {
const options = [{ value: 'value1', label: 'sample1' }, { value: 'value2', label: 'sample2' }];
return (
<div>
<Field name="customselect" component={RenderSelectInput} onChange={this.handleChange} options={options} />
</div>
)
}
}
export default homepage;
In above program , as I mentioned I just want to display "success" alert onchanging the value in wrapped react-select. 在上面的程序中,正如我提到的,我只想在包装的react-select中更改值时显示“成功”警报。 Please guide. 请指导。
Thanks, Shash 谢谢,嘘
You have to wrap the homepage component: 您必须包装主页组件:
export default reduxForm({
form: 'some form' // a unique name for this form
})(homepage);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.