时间戳

首页 > 解决方案 > 根据选中的单选按钮显示数组项的数据

javascript - 根据选中的单选按钮显示数组项的数据

问题描述

如果颜色属性与单击的单选按钮颜色匹配，我将尝试显示鞋子数组项的数据。如果选择了黑色单选按钮，则应显示具有黑色属性值的数组项。

（注：如何显示或渲染鞋子数据）

提前致谢！

应用程序.js

import React, { Component } from "react";


class CheckColor extends Component {
  constructor(props) {
    super(props)
    this.state = { 
      color: '',
      shoes: [
        {name: 'Black Shoe', color: 'Black', price: 180},
        {name: 'Red Shoe', color: 'Red', price: 120},
        {name: 'White Shoe', color: 'White', price: 100}
      ]
    }

    this.handleColorChange = this.handleColorChange.bind(this)
  }

  handleColorChange(e) {
    const color = e.target.value
    this.setState({ color: color })
  }

  render() {
    const colors = ['Black', 'Red', 'White']
    return(
      <form>
        {colors.map((color, index) => 
          <label key={index}>
            {color}
            <input 
            value={color}
            checked={this.state.color === color}
            onChange={this.handleColorChange}
            type="radio"
            />
          </label>
        )}
      </form>
    )
  }
}

export default class App extends Component {
  render() {
    return (
      <div className="App">
        <CheckColor />
      </div>
    );
  }
}

标签： javascriptreactjs

解决方案

您可以根据选定的颜色值过滤颜色，然后只需使用地图来显示过滤后的鞋子。

import React, { Component } from "react";

class CheckColor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      color: "",
      shoes: [
        { name: "Black Shoe", color: "Black", price: 180 },
        { name: "Red Shoe", color: "Red", price: 120 },
        { name: "White Shoe", color: "White", price: 100 }
      ]
    };

    this.handleColorChange = this.handleColorChange.bind(this);
  }

  handleColorChange(e) {
    const color = e.target.value;
    console.log(color);
    this.setState({ color: color });
  }

  render() {
    const colors = ["Black", "Red", "White"];
    const shoesToShow = this.state.shoes.filter(item => ( item.color === this.state.color));
    console.log(shoesToShow);
    return (
      <>
        <form>
          {colors.map((color, index) => (
            <label key={index}>
              {color}
              <input
                value={color}
                checked={this.state.color === color}
                onChange={this.handleColorChange}
                type="radio"
              />
            </label>
          ))}
        </form>
        {shoesToShow.map(shoe => (
          <div>{shoe.name} </div>
        ))}
      </>
    );
  }
}

推荐阅读