Question

我正在尝试使默认情况下为下拉菜单的组件。它需要有x个预先填充的选项，最后一个选项是“创建自己的”。如果用户选择“创建您自己的”，则下拉菜单输入需要更改为自由文本下拉菜单。我已经找到了我在JS中寻找的示例，但是在执行它时遇到了麻烦。这是我的Select组件，我只需要添加文本div并弄清楚如何在它们之间切换。就像我发布的JSFiddle一样。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { IconChevronDown } from '..';
import './select.scss';

export default class Select extends Component {
  render() {
    const { className, ...props } = this.props;

return (
  <div className={`c-select ${className}`}>
    <select {...props} className={`c-select-select`} />
    <IconChevronDown className="c-select-icon" />
      </div>
    );
  }
}

Select.defaultProps = {
  className: ''
};

Select.propTypes = {
  className: PropTypes.string
};

这就是我的称呼方式。

<Select
  className="c-quiz-select-form-select"
  onChange="if(this.options[this.selectedIndex].value=='customOption'){toggleField(this,this.nextSibling); this.selectedIndex='0';}"
    // value={selectedAnswer}
  >
    <option value="0" name="optionA">
      OptionA
    </option>
    <option value="1" name="optionB">
      OptionB
    </option>
    <option value="customOption" name="customInput">
      CustomInput
    </option>
    <option value="-1" name="landing">
      Select one
    </option>
  </Select>

http://jsfiddle.net/6nq7w/4/

谢谢

带有选项的下拉菜单，可将输入字段更改为文本输入

0 个答案: