Reactjs 条件显示输入字段

我正在为react的表单工作。选择dish type后，我希望有条件地显示其他字段。 例如，如果我选择比萨饼，我想显示数字字段。如果我选择“汤”，我想显示其他输入字段

下面是代码示例：

const Form = () => {
  const [dishes] = React.useState([
    {
      label: "Pizza",
      value: "Pizza",
    },
    { label: "Soup", value: "Soup" },
    { label: "Sandwich", value: "Sandwich" },
  ]);
  return (
    <div>
      <form>
        <label>Name</label>
        <input type="text" required></input>
        <label>Preperation Time</label>
        <input type="time" step="2" required></input>
        <label>Type</label>
        <select>
          {dishes.map((dish) => (
            <option key={dish.value} value={dish.value}>
              {dish.label}
            </option>
          ))}
        </select>
        <button>submit</button>
      </form>
    </div>
  );
};

export default Form;

const Form=（）=>{
常数[碟]=React.useState([
{
标签：“比萨饼”，
价值：“披萨”，
},
{标签：“汤”，值：“汤”}，
{标签：“三明治”，值：“三明治”}，
]);
返回(
名称
准备时间
类型
{dish.map（（dish）=>(
{dish.label}
))}
提交
);
};
导出默认表单；

试试这个（codesandbox:）

const[disks]=React.useState([
{
标签：“比萨饼”，
价值：“披萨”，
字段：(
浇头
)
},
{
标签：“汤”，
价值：“汤”，
字段：(
有多酸？
)
},
{
标签：“三明治”，
价值：“三明治”，
字段：(
输入您的配料
)
}
]);
const[selectedDish，setSelectedDish]=React.useState（碟[0]）；
const handleDishSelect=（e）=>{
const dish=dish.find（（dish）=>dish.value==e.target.value）；
如果（盘）{
小菜；
}
};
返回(
名称
准备时间
类型
{dish.map（（dish）=>(
{dish.label}
))}
{selectedDish&&selectedDish.field}
提交
);

试试这个（codesandbox:）

const[disks]=React.useState([
{
标签：“比萨饼”，
价值：“披萨”，
字段：(
浇头
)
},
{
标签：“汤”，
价值：“汤”，
字段：(
有多酸？
)
},
{
标签：“三明治”，
价值：“三明治”，
字段：(
输入您的配料
)
}
]);
const[selectedDish，setSelectedDish]=React.useState（碟[0]）；
const handleDishSelect=（e）=>{
const dish=dish.find（（dish）=>dish.value==e.target.value）；
如果（盘）{
小菜；
}
};
返回(
名称
准备时间
类型
{dish.map（（dish）=>(
{dish.label}
))}
{selectedDish&&selectedDish.field}
提交
);

从“React”导入React，{useState}；
函数App（）{
常数[碟]=React.useState([
{
标签：“比萨饼”，
价值：“披萨”，
},
{标签：“汤”，值：“汤”}，
{标签：“三明治”，值：“三明治”}，
]);
const[type，setType]=useState（[]）
常量handlechange=（值）=>{
设置类型（值）；
}
返回(
{（类型==“披萨”）&&（名称）
)
}
{（类型==“汤”）&&（准备操作时间）
)
}
类型
handlechange（e.target.value）}>
{dish.map（（dish）=>(
{dish.label}
))}
提交
);
}
导出默认应用程序；

从“React”导入React，{useState}；
函数App（）{
常数[碟]=React.useState([
{
标签：“比萨饼”，
价值：“披萨”，
},
{标签：“汤”，值：“汤”}，
{标签：“三明治”，值：“三明治”}，
]);
const[type，setType]=useState（[]）
常量handlechange=（值）=>{
设置类型（值）；
}
返回(
{（类型==“披萨”）&&（名称）
)
}
{（类型==“汤”）&&（准备操作时间）
)
}
类型
handlechange（e.target.value）}>
{dish.map（（dish）=>(
{dish.label}
))}
提交
);
}
导出默认应用程序；

所以你想在条件下显示一些JSX，对吗？ 您只需检查条件并选择一个输出，就像条件一样

<div>
{dishes.value.equals("pizza") && (<input type="number">)}
{dishes.value.equals("soup") && (<input type="text">)}
</div>

<div>
{dishes.value.equals("pizza") ? (<input type="number">) : (<input type="text">)}
</div>

{disks.value.equals（“披萨”）&&（（）}
{disks.value.equals（“汤”）&&（（）}

您可以使用三元运算来确定if-else条件

<div>
{dishes.value.equals("pizza") && (<input type="number">)}
{dishes.value.equals("soup") && (<input type="text">)}
</div>

<div>
{dishes.value.equals("pizza") ? (<input type="number">) : (<input type="text">)}
</div>

{disks.value.equals（“披萨”）？（）：（）}

所以你想在条件下显示一些JSX，对吗？ 您只需检查条件并选择一个输出，就像条件一样

<div>
{dishes.value.equals("pizza") && (<input type="number">)}
{dishes.value.equals("soup") && (<input type="text">)}
</div>

<div>
{dishes.value.equals("pizza") ? (<input type="number">) : (<input type="text">)}
</div>

{disks.value.equals（“披萨”）&&（（）}
{disks.value.equals（“汤”）&&（（）}

您可以使用三元运算来确定if-else条件

<div>
{dishes.value.equals("pizza") && (<input type="number">)}
{dishes.value.equals("soup") && (<input type="text">)}
</div>

<div>
{dishes.value.equals("pizza") ? (<input type="number">) : (<input type="text">)}
</div>

{disks.value.equals（“披萨”）？（）：（）}

这是我将遵循的体系结构（见下文）。首先定义菜单，我认为它不会改变，所以应该是一个普通对象。然后将代码拆分为几个组件：

菜单窗体-这可以是您的主菜单窗体组件

MenuItem-这是一个为菜单项生成选择选项的组件

使用其他组件来处理每个菜单项的细节，例如PizzaItemMenu、SoupItemMenu等

下面是一个基于您的代码运行的完整示例应用程序：

const menu = {
  pizza: {
    type: [
      {
        label: 'neapolitana',
        value: 'npa'
      }, {
        label: 'chicago',
        value: 'ccg'
      }, {
        label: '4-cheese',
        value: 'cse'
      }],
    number: 1,
    addOn: false
  },
  soup: {
    type: [{
      label: 'carrot',
      value: 'crt'
    }, {
      label: 'potato',
      value: 'ptt'
    }],
    number: 1,
    addOn: false
  }
}

const MenuForm = () => {
  const [menuItem, setMenuItem] = React.useState(false);
  const handleMenuItemSelection = (e) => {
    setMenuItem(e.target.value);
  }
  const additionalMenuItemSelections = () => {
    switch (menuItem) {
      case 'pizza':
        return <PizzaItemMenu />
      case 'soup':
        return <SoupItemMenu />
      default:
        return false;
    }
  }
  return (
    <div>
      <form>
        <label>Name</label>
        <input type="text" required></input>
        <label>Preperation Time</label>
        <input type="time" step="2" required></input>
        <label>Type</label>
        <select className='menu' onChange={handleMenuItemSelection} defaultValue='x'>
          <option disabled value="x">Select menu item</option>
          {Object.keys(menu).map((item, index) => {
            return (
              <option key={index} value={item}>{item}</option>
            )
          })}
        </select>
        {additionalMenuItemSelections()}
        <button>submit</button>
      </form>
    </div>
  );
};

const PizzaItemMenu = () => {
  const [pizzaType, setPizzaType] = React.useState(false);
  const handleSelection = (e) => {
    const data = e.target.value;
    setPizzaType(data);
  }
  return (
    <div className='soup-menu'>
      <p>You've selected pizza!</p>
      <MenuItem  menuItem='pizza' handleSelection={handleSelection} />
      Additional form menu selection options for pizzas goes here
      {pizzaType && <p>You've selected {pizzaType} pizza!</p>}
    </div>
  )
}

const SoupItemMenu = () => {
  const [soupType, setSoupType] = React.useState(false);
  const handleSelection = (e) => {
    const data = e.target.value;
    setSoupType(data);
  }
  return (
    <div className='soup-menu'>
      <p>You've selected soup!</p>
      <MenuItem  menuItem='soup' handleSelection={handleSelection} />
      Additional form menu selection options for soups goes here
      {soupType && (<p>You've selected {soupType} soup!</p>)}
    </div>
  )
}

const MenuItem = ({ menuItem, handleSelection }) => {
  const itemOptions = menu[menuItem].type;
  return (
    <select id={menuItem} defaultValue='x' onChange={(e) => handleSelection(e)} >
      <option disabled value="x">Select {menuItem} type</option>
      {itemOptions.map((itemKey, index) => (
        <option key={index} value={itemKey.value}>{itemKey.label}</option>
      ))}
    </select>
  )
}

export default MenuForm;

const菜单={
比萨饼：{
类型：[
{
标签：“那不勒斯”，
值：“npa”
}, {
标签：“芝加哥”，
值：“ccg”
}, {
标签：“4-奶酪”，
值：“cse”
}],
编号：1，
插件：false
},
汤：{
类型：[{
标签：“胡萝卜”，
值：“crt”
}, {
标签：“土豆”，
值：“ptt”
}],
编号：1，
插件：false
}
}
常量菜单格式=（）=>{
const[menuItem，setMenuItem]=React.useState（false）；
常量handleMenuItemSelection=（e）=>{
setMenuItem（即目标值）；