添加 <textarea> 单击React.js上的选项后，在&lt;select&gt;标记内添加一个标记

Question

So basically, I got the following JSX file and I want to have an event handler that listens to an event that is generated after clicking "Other" in the manufacturer section. Please find the mentioned option as the last <option> tag inside the <select> tag with the name "colour", and inside the <Fragment> tag. Also, please ignore the OnClick function that is already there; it has no use in this problem.

The event that I want to be generated is quite particular. It should add a text area (or input, not entirely sure) where the "Other" option inside the drop-down menu is located so that the user is able to type the other option they didn't find in the current selection of colours.

How would I be able to achieve this?

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

You can set a class on an input / textarea based on the value of select . Like this:

<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":""}/>

This adds a class of hidden to your input. Now you can use .hidden{ diplay:none; } .hidden{ diplay:none; }

And this function will handle change of your values:

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