Question

我正在使用react-select组件，目前正在制作redux-form <Field />组件，以便选择＆＃34;其他＆＃34;下拉选项（选择框列表）。我尝试使用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方法并在选择＆＃34;其他＆＃34;时显示<Field />来自react-select框的选项。

有一点需要注意：我可以将包装好的react-select框中的值提交给表单，但是想要在选择＆＃34;其他＆＃时实现文本字段的显示34;选项。请指导。

谢谢，词shash

Answer 1

您需要同时导入Field和reduxForm才能使用。

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

然后，您需要使用options参数将表单包装在reduxForm函数中。

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

只有这样才能传递自定义字段。请参阅此example from the docs。

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

constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = { selected: false };
}

React-Select：当用户选择＆＃34;其他＆＃34;时，如何显示空的redux-form <field>下拉列表中的选项？

1 个答案: