单击 React.js 上的选项后，在 <select> 标记内添加 <textarea> 标记

Question

所以基本上，我得到了以下 JSX 文件，我想要一个事件处理程序来监听在制造商部分中单击 “其他” 后生成的事件。请在名为“颜色”的<select> 标记内和<Fragment> 标记内找到提到的选项作为最后一个<option> 标记。另外，请忽略已经存在的 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

您可以根据select 的值在input/textarea 上设置一个类。像这样：

<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
  })
}