基于所选选项的有条件呈现表单部分

Question

我对react很陌生，目前正在创建一个允许用户输入反馈的react组件。我想创建一个有两种类型反馈的反馈表单。用户应该能够在类型1和类型2之间进行选择，并基于其呈现不同表单字段的选项。

这是我现在的代码：

import React, { useState,useEffect } from 'react'
function Feedback() {
return( 
<form id="live_form">
<div class="form-group">
<label class="control-label">
Feedback Type
</label>
<select class="form-select">
<option selected>Choose feedback type</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<div class="form-group">
<label class="control-label">
Enter feedback for option 1
</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form-group">
<label class="control-label">
Enter feedback for option
</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>            
)
}
export default Feedback;

我想要的是当选择选项1时只显示第一个文本区域，当选择选项2时只显示第二个文本区域。有人能解释一下我如何检查选择了whick选项，以便在此基础上呈现表单的其余部分吗？

Answer 1

您可以使用状态变量来存储所选选项，然后根据该值来呈现等效部件

const [selectedOption, setSelectedOption] = useState(null);
<select
class="form-select"
onChange={(e) => setSelectedOption(e.target.value)}
>

和

{selectedOption === "1" && (
<div class="form-group">
<label class="control-label">Enter feedback for option 1</label>
<textarea
class="form-control"
id="exampleFormControlTextarea1"
rows="3"
></textarea>
</div>
)}

检查

这个沙箱