根据所选选项有条件地呈现表单的部分答案

【问题标题】：Conditional rendering parts of form based on selected option根据所选选项有条件地呈现表单的部分
【发布时间】：2021-06-23 09:37:21
【问题描述】：

我是 React 的新手，我目前正在创建一个允许用户输入反馈的 React 组件。我想创建一个具有 2 种反馈类型的反馈表。用户应该能够在类型 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只显示第一个textarea以及选项2只显示选项2以仅显示第二个textarea时。有人可以解释一下我如何检查选择了 whick 选项以基于此呈现表单的其余部分吗？

【问题讨论】：

标签： reactjs bootstrap-5

【解决方案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>
  )}

检查

this sandbox

【讨论】：

我认为它非常适合我的需要。谢谢你的回答。如果我还有其他问题，我会回来评论。