Question

我想添加带有（名称颜色和价格）的商品，但是当我尝试添加时，会像这样添加它们。它应该显示一行，例如 PHONE-颜色：0-价格：1000 ，而不是显示三件事。我试图制定一种方法，但是它也没有用。我该如何编写代码才能将这些输入放在一行上。

</div>
{props.options.length === 0 && <p className="widget__message">Please add a Product to get started!</p>}
{
  props.options.map((option, index) => (
    <Option
      key={option}
      optionText={option}      
      count= {index + 1}
      handleDeleteOption={props.handleDeleteOption}
    />     
  ))     
}
{
  props.colors.map((color, index) => (
    <Option        
      colorText = {color}
      count= {index + 1}
      handleDeleteOption={props.handleDeleteOption}
    />
  ))     
}

{
  props.prices.map((price, index) => (
    <Option       
      priceText = {price}          
      count= {index + 1}
      handleDeleteOption={props.handleDeleteOption}
    />
  ))  
}

导出默认选项；

Answer 1

好吧，这是因为您正在打印整个数组，因此您不会得到每种类型的期望结果，而是先得到一种类型的所有类型，然后再得到另一种类型的

。

一种方法可以是：

</div>
{props.options.length === 0 && <p className="widget__message">Please add a Product to get started!</p>}
{
  props.options.map((option, index) => (
<div key={option}>
    <Option
      optionText={option}      
      count= {index + 1}
      handleDeleteOption={props.handleDeleteOption}
    />
    <Option       
      colorText = {props.colors[index]}
      count= {index + 1}
      handleDeleteOption={props.handleDeleteOption}
    />
   <Option       
      priceText = {props.prices[index]}          
      count= {index + 1}
      handleDeleteOption={props.handleDeleteOption}
    />
</div>
  )) 
}
</div>

我在编写时是这样做的，所以也许我忘记了一些括号或括号，但是这个想法只是一张地图，并且在地图内部每次迭代都获得一个元素。

如果数组的对象具有3个属性，则每种属性（选项，颜色，价格）一个，然后将object.option，object.color和object.price传递给每个Option组件，则可能会更好。

在这种方法中，我也没有考虑到props.prices [index]或props.colores [index]可能不存在，我不知道是否会发生，只是为了展示这个概念。

如何获得用户输入并将其打印在一行中？

1 个答案: