Question

我是React的新手。我有三个组件：呈现一个ProductOptions.js组件和一个ProductImage.js组件的顶级App.js组件。我想根据ProductOptions组件中下拉菜单的值来更改ProductImage组件中显示的图像。 App首次渲染时，默认选择为“黑色”，并且相应的product-black.jpg图像将显示在ProductImage组件中。用户可以切换到棕色，该棕色应在ProductImage组件中显示product-brown.jpg图像。

我知道我需要更新状态并使用onChange事件来侦听下拉列表的值，但是我不确定如何将它们连接在一起。

应用程序组件：

import React from 'react';
import ProductOptions from './ProductOptions';
import ProductImage from './ProductImage';

class App extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-8">
           <ProductOptions />
          </div>
          <div className="col-4">
           <ProductImage />
          </div>
         </div>
       </div>
      );
    }
}

export default App;

ProductOptions组件：

import React from 'react';

class ProductOptions extends React.Component {
  render() {
    return (
    <div id="product-options">
        <form>
            <label for="colors">Colors</label>
            <select className="form-control form-control-sm" id="colors" name="colors">
                <option value="Black">Black</option>
                <option value="Brown">Brown</option>
            </select>
        </form>
    </div>
    );
  }
}

export default ProductOptions;

ProductImage组件：

import React from 'react';
import productBlack from '../images/product-black.jpg';
import productBrown from '../images/product-brown.jpg';

class ProductImage extends React.Component {
  render() {
    return (
    <div id="product-image">
      <img
        alt="tempalt"
        className="img-fluid"
        src={tempsource}
      />
    </div>
   );
  }
}

export default ProductImage;

Answer 1

您的主要App具有两个子组件ProductOptions和ProductImage，它们也是兄弟，需要彼此通信。

App拥有拥有状态的权利，该状态将要显示给用户的当前产品存储在变量selectedProduct中。
selectedProduct作为道具（同样命名）传递给两个组件
this.handleSelectedProduct()传递到ProductOptions以被调用onChange，并且App的状态由所选产品设置
使用三元运算符，该运算符检查传递的字符串以相应地渲染图像。

应用程序组件：

import React from "react";
import ProductOptions from "./ProductOptions";
import ProductImage from "./ProductImage";

class App extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      selectedProduct: "Black"
    };
  }

  handleSelectedProduct = selection => {
    this.setState({ selectedProduct: selection });
  };

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-8">
            <ProductOptions
              handleSelectedProduct={this.handleSelectedProduct}
              selectedProduct={this.state.selectedProduct}
            />
          </div>
          <div className="col-4">
            <ProductImage selectedProduct={this.state.selectedProduct} />
          </div>
        </div>
      </div>
    );
  }
}

export default App;

ProductOptions组件：

import React from "react";

class ProductOptions extends React.Component {
  render() {
    return (
      <div id="product-options">
        <form>
          <label for="colors">Colors</label>
          <select
            className="form-control form-control-sm"
            id="colors"
            name="colors"
            value={this.props.selectedProduct}
            onChange={e => {
              this.props.handleSelectedProduct(e.target.value);
            }}
          >
            <option value="Black">Black</option>
            <option value="Brown">Brown</option>
          </select>
        </form>
      </div>
    );
  }
}

export default ProductOptions;

ProductImage组件：

import React from "react";
import productBlack from "../images/product-black.jpg";
import productBrown from "../images/product-brown.jpg";

class ProductImage extends React.Component {
  render() {
    const { selectedProduct } = this.props;
    return (
      <div id="product-image">
        <img
          alt="tempalt"
          className="img-fluid"
          src={selectedProduct === "Black" ? productBlack : productBrown}
        />
      </div>
    );
  }
}

export default ProductImage;

使用React根据另一个组件中的下拉值更改组件中的图像

1 个答案: