根据所选择的单选按钮显示数组项目的数据

问题描述 投票:0回答:1

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

((注意:如何显示或渲染鞋子数据)

提前感谢!

App.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>
    );
  }
}
javascript reactjs
1个回答
0
投票

尝试一下

handleColorChange(e) {
        const color = e.target.value;
        const shoesToShow = this.state.shoes.filter((item) => {
        item.color === 'Black';
       });
        this.setState({ color: color, shoes: shoesToShow });
      }
© www.soinside.com 2019 - 2024. All rights reserved.