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

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

reactjs

Reactjs 使用React根据另一个组件中的下拉值更改组件中的图像,reactjs,Reactjs,我是新来的。我有三个组件：一个顶级App.js组件，它呈现一个ProductOptions.js组件和一个ProductImage.js组件。我想根据ProductOptions组件中下拉列表的值更改ProductImage组件中显示的图像。当应用程序第一次渲染时，默认选择为黑色，相应的product-Black.jpg图像将显示在ProductImage组件中。用户可以切换到Brown，它将在ProductImage组件中显示product-Brown.jpg图像我知道我需要更新状态并使用o

我是新来的。我有三个组件：一个顶级App.js组件，它呈现一个ProductOptions.js组件和一个ProductImage.js组件。我想根据ProductOptions组件中下拉列表的值更改ProductImage组件中显示的图像。当应用程序第一次渲染时，默认选择为黑色，相应的product-Black.jpg图像将显示在ProductImage组件中。用户可以切换到Brown，它将在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;

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;

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;

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;

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;

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”导入React；
从“/ProductOptions”导入ProductOptions；
从“./ProductImage”导入ProductImage；
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
导出默认应用程序；

ProductOptions组件：

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;

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;

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;

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;

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;

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”导入React；
类ProductOptions扩展了React.Component{
render（）{
返回(
颜色
黑色
棕色的
);
}
}
导出默认产品选项；

ProductImage组件：

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;

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;

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;

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;

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;

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”导入React；
从“../images/product black.jpg”导入productBlack；
从“../images/product brown.jpg”导入productBrown；
类ProductImage扩展了React.Component{
render（）{
返回(
);
}
}
导出默认产品图像；

您的主

应用程序

有两个子组件

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 {
  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;

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;

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;

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;

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;

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”导入React；
从“/ProductOptions”导入ProductOptions；
从“/ProductImage”导入ProductImage；
类应用程序扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
所选产品：“黑色”
};
}
handleSelectedProduct=选择=>{
this.setState（{selectedProduct:selection}）；
};
render（）{
返回(
);
}
}
导出默认应用程序；

ProductOptions组件：

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;

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;

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;

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;

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;

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”导入React；
类ProductOptions扩展了React.Component{
render（）{
返回(
颜色
{
此.道具.手选产品（如目标.价值）；
}}
>
黑色
棕色的
);
}
}
导出默认产品选项；

ProductImage组件：

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;

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;

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;

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;

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;

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”导入React；
从“./images/product black.jpg”导入productBlack；
从“./images/product brown.jpg”导入productBrown；
类ProductImage扩展了React.Component{
render（）{
const{selectedProduct}=this.props；
返回(
);
}
}
导出默认产品图像；