时间戳

首页 > 解决方案 > 仅当变量具有特定值时才在 Reactjs 页面中显示图像

reactjs - 仅当变量具有特定值时才在 Reactjs 页面中显示图像

问题描述

我有以下简单的代码，它有一个小的单选按钮选择，它在表单底部显示了两个图像。我希望这段代码在加载时不显示图像，并且根据单选按钮选择中所做的选择，只显示代表选择的单个图像。基本上是一个虚拟的if this.state.programmingmodel === 'event-driven' then <HoverImage src={longrunning} hoverSrc={longrunninghover} />（和同样的东西eventdriven）。

我曾尝试向部分添加onSubmitForm语法，<HoverImage>但并没有真正奏效。我认为我不需要创建另一个“事件”，因为我想重复使用该onSubmit事件。

import React, { Component } from "react";
import "./index.css"

import HoverImage from "react-hover-image";
import longrunning from './longrunning.jpg';
import longrunninghover from './longrunninghover.jpg';
import eventdriven from './eventdriven.jpg';
import eventdrivenhover from './eventdrivenhover.jpg';

class App extends Component {
  constructor() {
    super();
    this.state = {
      programmingmodel: "long-running"
    };
  }

  onValChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };

  onCheckValChange = (e) => {
    this.setState({ [e.target.name]: e.target.checked });
  };

  onSubmitForm = (event) => {
    event.preventDefault();
    console.log("state", this.state);
  };

  render() {
    return (
      <div className="App">
        <h1>Containers product selection </h1>
        <form onSubmit={this.onSubmitForm}>
          <br/>
          <b> Programming model </b>
          <br/>
          <label>
            <input
              type="radio"
              name="programmingmodel"
              value="long-running"
              checked={this.state.programmingmodel === 'long-running'}
              onChange={this.onValChange}
            />
            <span>Long-running </span>
          </label>
          <label>
            <input
              type="radio"
              name="programmingmodel"
              value="event-driven"
              checked={this.state.programmingmodel === 'event-driven'}
              onChange={this.onValChange}
            />
            <span>Event-driven </span>
          </label>
          <br/>
          <button type="submit">Submit</button>
          <br/>
        </form>
        <br/>
        <HoverImage src={longrunning} hoverSrc={longrunninghover} />
        <br/>
        <HoverImage src={eventdriven} hoverSrc={eventdrivenhover} />
      </div>
    );
  }
}

export default App;

标签： reactjs

解决方案

您只需要检查状态的状态并决定要渲染哪个组件。我已经删除了表单和一些未使用的代码，因为它不是必需的。

像这样：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      programmingmodel: "long-running"
    };
  }

  onValChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  onCheckValChange = (e) => {
    this.setState({ [e.target.name]: e.target.checked });
  };

  render() {
    return (
      <div className="App">
        <h1>Containers product selection </h1>
        <b> Programming model </b>
        <br />
        <label>
          <input
            type="radio"
            name="programmingmodel"
            value="long-running"
            checked={this.state.programmingmodel === "long-running"}
            onChange={this.onValChange}
          />
          <span>Long-running </span>
        </label>
        <label>
          <input
            type="radio"
            name="programmingmodel"
            value="event-driven"
            checked={this.state.programmingmodel === "event-driven"}
            onChange={this.onValChange}
          />
          <span>Event-driven </span>
        </label>
        {this.state.programmingmodel === "long-running" ? (
          <HoverImage src={longrunning} hoverSrc={longrunninghover} />
        ) : (
          <HoverImage src={eventdriven} hoverSrc={eventdrivenhover} />
        )}
      </div>
    );
  }
}

关于加载状态，我会在父组件上做，不会混用逻辑。

推荐阅读