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

Question

因此，基本上，我得到了以下JSX文件，并且我想要一个事件处理程序，该事件处理程序侦听在制造商部分中单击“ Other” 后生成的事件。请在 标记内名为“颜色”的最后一个 标记内以及在 内找到最后一个 标记代码>标签。另外，请忽略已经存在的OnClick函数。在这个问题上没有用。

我要生成的事件非常特殊。它应该在下拉菜单内的“其他”选项所在的位置添加一个文本区域（或输入，不确定），以便用户可以键入在当前颜色选择中找不到的其他选项

我将如何实现这一目标？

  import React，{片段}来自'react';
从'../../../common/theme/cssStyledColumns'导入{StyledSection，StyledSectionColLeft，StyledSectionCol}；
从'../../../common/form'导入{Textarea，Select，Input，MandatoryInfo};

const ApplianceDetails =（）=>（
  <片段>
    
设备详细信息
    
    
      
        <选择名称=“颜色”标签=“颜色*”>
          -选择-
          蓝色
          红色
          黄色
          其他
        
        <输入名称=“模型”标签=“模型*” />
      
      
        <输入名称=“位置”标签=“位置*” />
      
    
  
）;

导出默认的ApplianceDetails;
 

1 个答案:

答案 0 :(得分：0)

您可以基于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
  })
}

相关问题

• 单击后在图像中附加标记框
• jquery-在<select> </select> </option>中添加<option>标签
• 单击按钮添加新的<select>标记
• 根据文本内部选择select标签选项
• 单击带有类占位符的选项后更改选择标记的颜色
• React-Select 1.0.0-rc.5 - 在选择选项
• 单击模式引导程序内的按钮后的Textarea
• 禁用AngularJS形式的select标记内的选项
• 单击React.js上的选项后，在<select>标记内添加<textarea>标记
• 单击一个特定的单选按钮/选择选项后添加一个文本字段

最新问题

• 我写了这段代码，但我无法理解我的错误
• 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
• 是否有可能使 loadstring 不可能等于打印？卢阿
• java中的random.expovariate()
• Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
• 为什么我的 Onclick 箭头功能在 React 中不起作用？
• 在此代码中是否有使用“this”的替代方法？
• 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
• 每千个数字得到
• 更新了城市边界 KML 文件的来源？

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