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

EN

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;