如何在 React 中设置一组动态范围输入的值？答案

【问题标题】：How can I set the values of a dynamic set of range inputs in React?如何在 React 中设置一组动态范围输入的值？
【发布时间】：2020-05-08 00:54:35
【问题描述】：

我有一个数组，我想循环并从中创建范围输入。

const ratings = [
  {
    title: 'Category One'
  },
  {
    title: 'Category Two'
  },
  {
    title: 'Category Three'
  }
];

const renderRatings = ratings.map((rating, key) => {
  return (
    <div className="rating" key={key}>
      <h3>{rating.title}</h3>
      <div className="rating__num">0</div>
      <input className="rating__range" type="range" min="0" max="10" />
    </div>
  );
});

如何更新每个 rating__num 以反映其 rating__range 兄弟的值？

【问题讨论】：

粘贴评级数组数据。
在<div> 前面添加return 将是一个开始。如果您正在编写带有块体而不是单线的箭头函数，则需要一个。
正如 Mike salid 一样，首先在类名为“rating”的 div 之前添加 return，或者将所有内容放在括号中以在 rating 变量中返回这个 jsx 元素
啊，是的，我忘记了return 声明。我已经添加了它，但我仍然不确定如何更新 rating__num 中的值。

标签： reactjs input onchange

【解决方案1】：

我想通了。我只需要根据评级创建一个新组件，因此它有自己的状态。

function Rating(props) {

  const [ratingValue, setRatingValue] = useState(0);

  return (
    <div className="rating" key={key}>
      <h3>{rating.title}</h3>
      <div className="rating__num">{ratingValue}</div>
      <input
        className="rating__range"
        type="range"
        min="0"
        max="10"
        onChange={(e) => setRatingValue(e.currentTarget.value)}
      />
    </div>
  ):
}

function MyComponent(props) {

  const renderRatings = ratings.map((rating, key) => {
    return (
      <Rating key={key} rating={rating} />
    );
  });

  return (
    {renderRatings()}
  );

}

【讨论】：