React页面中如何仅在变量为指定值时显示对应图片

实现方案 #

你只需要新增1个状态字段控制图片显隐、在现有提交事件里更新该状态、给图片加条件渲染逻辑即可，不需要新增任何额外事件，完全复用现有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",
      isSubmitted: false // 新增提交状态控制，初始为false不显示图片
    };
  }

  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);
    this.setState({ isSubmitted: true }); // 提交后更新状态，允许渲染图片
  };

  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/>
        {/* 仅提交后根据选中的选项渲染对应图片 */}
        {this.state.isSubmitted && (
          <>
            {this.state.programmingmodel === 'long-running' && (
              <HoverImage src={longrunning} hoverSrc={longrunninghover} />
            )}
            {this.state.programmingmodel === 'event-driven' && (
              <HoverImage src={eventdriven} hoverSrc={eventdrivenhover} />
            )}
          </>
        )}
      </div>
    );
  }
}

export default App;

核心修改点

• state中新增isSubmitted字段，初始值为false，保证页面首次加载时不会显示任何图片
• 在原有的onSubmitForm方法中新增更新isSubmitted为true的逻辑，完全复用现有提交事件
• 替换原有的固定两张图片渲染逻辑为条件渲染，仅当提交完成后，根据当前选中的programmingmodel值渲染对应的单张图片

内容的提问来源于stack exchange，提问作者mreferre