<textarea> <select> 在 React 上单击选项后在标签中添加标签.js

Question

所以基本上，我得到了以下JSX文件，我想有一个事件处理程序来侦听在制造商部分中单击"其他">后生成的事件。请在名称为"color"的<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
})
}