reactjs - 根据所选选项有条件地渲染表单部分

Question

我是 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仅显示仅显示第二个TextArea。有人可以解释我如何检查选择了whick选项以便基于此呈现表单的其余部分吗？

标签： reactjsbootstrap-5

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

查看

这个沙盒