时间戳

首页 > 解决方案 > 带有将输入字段更改为文本输入的选项的下拉菜单

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

问题描述

我正在尝试制作一个默认为下拉列表的组件。它需要有 x 数量的预填充选项以及“创建自己的”的最终选项。如果用户选择“创建您自己的”下拉输入需要更改为自由文本下拉。我找到了一个我在 JS 中寻找的示例，但在 react 中实现它时遇到了麻烦。这是我的 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/

谢谢，

标签： reactjs

解决方案

这应该很容易。您只需将下拉组件和输入组件分开，并根据选择呈现每个组件。您可能可以将活动选择存储在组件状态中。

这是我将如何处理它。只是一个概念。

ht tps://codesandbox.io/s/2151yy7v2n

推荐阅读