Как я могу установить значения набора динамических c входов диапазона в React? - PullRequest
Новая
       35

Как я могу установить значения набора динамических c входов диапазона в React?

0 голосов
/ 22 января 2020

У меня есть массив, который я хочу пропустить через l oop и создать входы диапазона из. 

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 родного брата

1 Ответ

0 голосов
/ 22 января 2020

Я понял это. Мне просто нужно было создать новый компонент из рейтинга, чтобы у него было собственное состояние. 

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

}
...