reactjs - Formsy与react-select，提交后获取元素而不是值

Question

我正在使用 Formsy 进行输入验证。对于选择输入，我使用的是 react-select，我为此创建了这个自定义组件，

import React from 'react';
import PropTypes from 'prop-types';
import Formsy from 'formsy-react';
import Select from 'react-select';


class SelectValidation extends React.Component {
  /* eslint-disable */
  static propTypes = {
    trigger: PropTypes.string,
    className: PropTypes.string,
    name: PropTypes.string,
    id: PropTypes.string,
    placeholder: PropTypes.string,
    setValue: PropTypes.func,
    isFormSubmitted: PropTypes.func,
    getErrorMessage: PropTypes.func,
    showRequired: PropTypes.func,
    options: PropTypes.array
  };
  /* eslint-enable */

  static defaultProps = {
    trigger: null,
    className: '',
    name: '',
    id: '',
    placeholder: '',
  };

  constructor() {
    super();
    this.changeValue = this.changeValue.bind(this);
    
  }

  changeValue(selectedOption) {
    console.log(selectedOption);
    this.props.setValue(selectedOption);
  }

  render() {
    const errorMessageObj = (this.props.isFormSubmitted() || this.props.trigger) ? this.props.getErrorMessage() : null;
    const required = (this.props.isFormSubmitted() && this.props.showRequired()) ?
      <span className={'help-block text-danger'}>This value is required.</span> : null;
    const errorMsg = [];
    if (errorMessageObj) {
      Object.keys(errorMessageObj).forEach((type) => {
        errorMsg.push(errorMessageObj[type]);
      });
    }
    const errorList = errorMsg.map((msg, index) =>
      <span key={`msg-err-${index.toString()}`} className={'help-block text-danger'}>{msg}</span>,
    );

    return (
      <div className={this.props.className}>
        <Select
          options={this.props.options}
          name={this.props.name}
          id={this.props.id}
          onBlur={this.changeValue}
          onChange={(option) => {this.changeValue(option)}}
          
          placeholder={this.props.placeholder}
        />
        {required}
        {errorList}
      </div>
    );
  }
}

export default Formsy.HOC(SelectValidation)

;

在该changeValue方法中，我得到了正确的选择选项，但是当我使用 Formsy 的onValidSubmit事件提交表单时，我得到了所有表单值的对象，但是对于 react-select 我得到了这样的东西，

Object { dispatchConfig: null, _targetInst: null, _dispatchListeners: null, … }

这是我的 Formsy 表单代码，

<Formsy.Form onValidSubmit={(model) => console.log(model)}>
    <Row>
        <Col lg={6} md={6}>

            <FormGroup>
                <Label for="name">
                    Full Name
                </Label>
                <InputValidation
                    type="text"
                    name="name"
                    placeholder="Enter full name"
                    required
                />
            </FormGroup>

            <FormGroup>
                <Label for="email">
                    Email
                </Label>
                <InputValidation
                    type="email"
                    name="email"
                    placeholder="Enter email"
                    required
                />

            </FormGroup>

            <FormGroup>
                <Label for="image">
                    Select Profile Picture
                </Label>
                <InputValidation
                    type="file"
                    name="image"

                />
            </FormGroup>

            <br />


            <FormGroup>
                <Button color="warning" type="submit" className="mr-xs">
                    Save
                </Button>
                <Button color="default">Cancel</Button>
            </FormGroup>


        </Col>

        <Col lg={6} md={6}>

            <FormGroup>
                <Label for="phone">
                    Phone Number
                </Label>
                <InputValidation
                    type="text"
                    name="phone"
                    placeholder="Enter phone number"
                    required
                />
            </FormGroup>

            <FormGroup>
                <Label for="role">
                    Role
                </Label>

                <SelectValidation
                    name='role'
                    placeholder='Select Role'
                    options={this.state.roles}
                    value={this.selectedRole}
                    trigger="change"
                    required
                />


            </FormGroup>




        </Col>

    </Row>
</Formsy.Form>