Html 如何根据下拉选择中的某些值匹配在行中添加新字段

我在表格中有下拉列表。基于选择下拉列表值，如果它与特定值匹配，我需要在下拉列表旁边显示一个字段/标签。我在旁边写了一张表格

    <div className='row'>
    <div> <label ....>
<select
       name="trnType"
       id="trnType"
       .......
       onChange={event => {values.trnType = event.target.value;}}
       defaultValue={values.trnType}
>
{trnType.map((def, key)=>(
<option key={def.value} value={def.value}>
 <def.label>
</option>
))}
</select>
</label>
</div>
    <div> field shuld display based on value match in above drop down</div>
    </div>

{values.trnType=event.target.value；}
defaultValue={values.trnType}
>
{trnType.map（（def，key）=>(
))}
根据上述下拉列表中的值匹配显示字段

---

任何人请在这方面帮助我

你必须有状态。如果我们谈论功能组件

const MyForm = () => {
   const [selectBoxValue, setSelectBoxValue] = useState(here place 2 options)

   return <div className='row'>
             <select onChange={(e) => setSelectBoxValue(e.target.value)}> 
                <option>{selectBoxValue[1]}</option>
                <option>{selectBoxValue[1]}</option>
             </select>
             {selectBoxValue === firstOption 
                  ? <div> some value </div>
                  : <div> another value </div>
          </div>
}

constmyform=（）=>{
常量[selectBoxValue，setSelectBoxValue]=useState（此处放置2个选项）
返回
setSelectBoxValue（e.target.value）}>
{selectBoxValue[1]}
{selectBoxValue[1]}
{selectBoxValue==firstOption
？一些价值
：另一个值
}

谢谢您的回答，我正在使用下拉列表。我也可以用同样的方法选择。请检查我更新的问题。尝试将类型定义为consttrntype={'a'，'b'，'c'}谢谢Egor，它真的很有用