0

我正在使用react-select组件，目前正在通过redux-form <Field />从下拉列表（选择框列表）中选择“其他”选项来显示组件。我尝试了onChange方法，但它不起作用。

下面是我的SelectInput.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} />
);

这是我的主页SampleSelect.js

import React, {PropTypes} from 'react';
import SelectInput from './SelectInput';


class SampleSelect extends React.Component {

    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);

    }

    handleChange(event) //I have written this function to display an empty field on selecting "Other" option from dropdown. 
    {
        if (event.target.value == "THR") {
            this.setState({ selected: true })
        }
        else {
            this.setState({ selected: false })
        }
    }

    render() {

        const options = [{ value: 'THR', label: 'Other' }];
        const content = this.state.selected ? <Field name ="Other" id="otherBox" component ="input" /> : null;

        return (

            <div>
                Select Options: <Field name="selectField" component={SelectInput} onChange={this.handleChange} options={options} />  //Tried this but not working.
                <div>
                    {content}
                </div>
            </div>
        )
    }
}


export default SampleSelect;

请指导我如何触发onChange方法并<Field />在从react-select框中选择“其他”选项时显示。

需要注意的一件事：我可以将包装react-select框中的值提交到表单，但希望在选择“其他”选项时实现文本字段的显示。请指导。

谢谢，嘘

4

1 回答 1

0

您需要同时导入Field它们reduxForm才能正常工作。

import { reduxForm, Field } from 'redux-form';

然后，您需要将表单包装在reduxForm带有 options 参数的函数中。

export default reduxForm({
  form: 'SampleSelect'  // a unique identifier for this form
})(SampleSelect)

只有这样，您才能传递自定义字段。请参阅文档中的此示例。

最后，确保在构造函数中设置初始状态。

constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = { selected: false };
}
于 2017-03-13T15:35:58.260 回答