Добавление тега <textarea>внутри тега <select>после выбора параметра в React.js

Question

Итак, я получил следующий JSX-файл и хочу иметь обработчик событий, который прослушивает событие, которое генерируется после нажатия «Другие» в разделе производителя.Найдите упомянутую опцию в качестве последнего тега <option> внутри тега <select> с названием "color" и внутри тега <Fragment>.Также, пожалуйста, игнорируйте функцию OnClick, которая уже есть;это бесполезно в этой проблеме.

Событие, которое я хочу сгенерировать, довольно специфично.Следует добавить текстовую область (или ввод, не совсем уверенный), где находится опция «Другое» внутри выпадающего меню, чтобы пользователь мог ввести другую опцию, которую он не нашел в текущей выборке цветов..

Как мне этого добиться?

import React, { Fragment} from 'react';
import { StyledSection, StyledSectionColLeft, StyledSectionCol } from '../../../common/theme/cssStyledColumns';
import { Textarea, Select, Input, MandatoryInfo } from '../../../common/form';

const ApplianceDetails = () => (
  <Fragment>
    <h2>Appliance details</h2>
    <MandatoryInfo />
    <StyledSection>
      <StyledSectionColLeft>
        <Select name="colour" label="Colour *">
          <option value="">-Select-</option>
          <option value="Vokera">Blue</option>
          <option value="Warmflow">Red</option>
          <option value="Worcester">Yellow</option>
          <option onClick={console.log('Click happened')} value="Other">Other</option>
        </Select>
        <Input name="model" label="Model *" />
      </StyledSectionColLeft>
      <StyledSectionCol>
        <Input name="location" label="Location *" />
      </StyledSectionCol>
    </StyledSection>
  </Fragment>
);

export default ApplianceDetails;

Answer 1

Вы можете установить класс на input / textarea на основе значения select.Например:

<Select value={this.state.selectedOption} onChange={this.handleSelect} name="colour" label="Colour *">
  <option value="">-Select-</option>
  <option value="Vokera">Blue</option>
  <option value="Warmflow">Red</option>
  <option value="Worcester">Yellow</option>
  <option value="Other">Other</option>
</Select>

// Or textarea
<input type="text" value="" name=" className={this.state.selectedOption !== 'Other'?"hidden":""}/>

Это добавляет класс hidden к вашему входу.Теперь вы можете использовать .hidden{ diplay:none; }

И эта функция будет обрабатывать изменение ваших значений:

handleSelect(evt){
  this.setState({
    selectedOption: evt.target.value
  })
}