使用 React 有条件地渲染一个 div

Question

我想根据表单中的用户输入有条件地呈现一个 div。

用户输入一个介于 0 - 100 之间的值，我必须根据值 (0 -30、30-60、60-100) 渲染 3 个 div 中的 1 个。

基本上我有一个表格，用户可以在其中输入数字，下面我必须根据用户输入显示 3 个三角形中的 1 个。

我对此很陌生，所以希望得到一些帮助。 :D

Answer 1

    here is entire form component
    
     import React, { useState } from "react";

export default function Ex2() {

    const [scoreInfo, setScoreInfo] = useState(false);

    const handleChange = (event) => {
        setScoreInfo({ ...scoreInfo, [event.target.name]: event.target.value });
    }

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log(scoreInfo);
        setScoreInfo({score: ""});
    }

   
  return (
    <div>
      <div>
        <form  onSubmit={handleSubmit}>
          <div>
            <h3>Score input</h3>
          </div>

          <div>
            <input
              type="text"
              name="score"
              placeholder="Whats's the score?"
              value={scoreInfo.score}
            />
          </div>
          <div>
            <button>Submit Score</button>
           
          </div>
           
        </form>
      
      </div>
      <br />
      <div className="containerex2">
        <div className="square">
          <div class="content">
            <h1> Result</h1>
            <p className="slide-text">
              This slide is 100% editable. <br /> Adapt it to your own needs and{" "}
              <br /> capture your audience's <br /> attention.
            </p>
            <div className="circle1">
              <div className="contentc1">01</div>
              <div className="triangle1_2"></div>
            </div>
          </div>
        </div>
        <div className="square2">
          <div class="content">
            <h1> Result</h1>
            <p className="slide-text">
              This slide is 100% editable. <br /> Adapt it to your own needs and{" "}
              <br /> capture your audience's <br /> attention.
            </p>
            <div className="circle2">
              <div className="contentc1">02</div>
              <div className="triangle2_2"></div>
            </div>
          </div>
        </div>
        <div className="square3">
          <div class="content">
            <h1> Result</h1>
            <p className="slide-text">
              This slide is 100% editable. <br /> Adapt it to your own needs and{" "}
              <br /> capture your audience's <br /> attention.
            </p>
            <div className="circle3">
              <div className="contentc1">03</div>
              <div className="triangle3_2"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

    enter code here

Answer 2

const SomeComponent = () => {
  const [number, setNumber] = useState(null);

  const handleNumberChange = (event) => {
    const value = parseInt(event.target.value, 10);
    setNumber(isNaN(value) ? null : value);
  };

  return (
    <div>
      <input value={String(number)} onChange={handleNumberChange} />

      {typeof value === 'number' && value >= 0 && value <= 30 && (
        <Triangle1 />
      )}

      {typeof value === 'number' && value > 30 && value <= 60 && (
        <Triangle2 />
      )}

      {typeof value === 'number' && value > 60 && value <= 100 && (
        <Triangle3 />
      )}
    </div>
  );
};