javascript - React 中的条件表单渲染

Question

因此，我尝试渲染一个表单，以根据所选的游戏类型有条件地开始新的飞镖游戏。该表单具有本地状态并且“知道”选择了哪个游戏。因此，当选择游戏“X01”时，我需要一个变体、inCondition 和 outCondition 下拉列表，而游戏“Cricket”只需要一个额外的变体下拉列表(x01 变体以外的其他值)。我开始设计一个游戏形式，如下所示:

gameform.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import SelectInputMultiple from '../common/SelectInputMultiple';
import SelectInput from '../common/SelectInput';
import { games, x01Variants, conditions, cricketVariants } from './assets';

export default class GameForm extends Component {
  constructor(props) {
    super(props);
    this.players = props;
    this.handleMultipleChange = this.handleMultipleChange.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  state = {
    selectedPlayers: [],
    game: 'x01',
    x01variant: '501',
    inCondition: 'straight',
    outCondition: 'double',
    cricketVariant: 'cutthroat',
    errors: {}
  };

  formIsValid() {
    const _errors = {};
    if (this.state.selectedPlayers.length === 0)
      _errors.selectedPlayers = 'You need to select at least one player';

    this.setState({
      errors: _errors
    });

    return Object.keys(_errors).length === 0;
  }

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

  handleMultipleChange = e => {
    let _selectedPlayers = [...e.target.options]
      .filter(o => o.selected)
      .map(o => o.value);

    this.setState(prevState => ({
      selectedPlayers: { ...prevState.selectedPlayers, _selectedPlayers }
    }));
  };

  handleSubmit = e => {
    e.preventDefault();
    if (!this.formIsValid()) return;
    let _game = {
      selectedPlayers: this.state.selectedPlayers,
      game: this.state.game,
      x01Variant: this.state.x01variant,
      inCondition: this.state.inCondition,
      outCondition: this.state.outCondition,
      cricketVariant: this.state.cricketVariant
    };
    this.props.onSubmit(_game);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <SelectInputMultiple
          id="players"
          label="Players"
          name="players"
          onChange={this.handleMultipleChange}
          options={this.props.players}
          error={this.state.errors.selectedPlayers}
        />
        <SelectInput
          id="game"
          label="Game Type"
          name="game"
          onChange={this.handleChange}
          options={games}
          value={this.state.game}
          error={this.state.errors.game}
        />
        <SelectInput
          id="x01Variant"
          label="X01 Variants"
          name="x01Variant"
          onChange={this.handleChange}
          options={x01Variants}
          value={this.state.x01variant}
          error={this.state.errors.x01Variants}
        />
        <SelectInput
          id="inCondition"
          label="In Condition"
          name="inCondition"
          onChange={this.handleChange}
          options={conditions}
          value={this.state.inCondition}
          error={this.state.errors.condition}
        />
        <SelectInput
          id="outCondition"
          label="Out Condition"
          name="outCondition"
          onChange={this.handleChange}
          options={conditions}
          value={this.state.outCondition}
          error={this.state.errors.condition}
        />
        <SelectInput
          id="cricketVariant"
          label="Variant"
          name="cricketVariant"
          onChange={this.handleChange}
          options={cricketVariants}
          value={this.state.cricketVariant}
          error={this.state.errors.cricketVariant}
        />
        <input type="submit" value="Start Game" className="btn btn-primary" />
      </form>
    );
  }
}

GameForm.propTypes = {
  onSubmit: PropTypes.func.isRequired,
  players: PropTypes.array
};

所以我的目标是只显示与游戏类型相关的相应字段。我怎样才能根据 this.state.game 做到这一点？

预先感谢您的任何提示!

Answer 1

当游戏模式设置为“板球”时，您可以有条件地渲染变体选择输入

{this.state.game === 'Cricket' && (
  <SelectInput />
)}

之所以可以这样写，是因为在 JavaScript 中，&& 运算符基本上返回第一个值(如果第一个值是假值)，如果第一个值是真值则返回第二个值。 IE。如果“a”为假，则 a && b 将返回“a”；如果“a”为真，则返回“b”。因此，在这种情况下，当 this.state.game === 'Cricket' 时，将返回 JSX 代码，从而呈现表单输入。

还有一个提示!如果你想根据条件渲染两个 JSX 元素之一，你可以使用三元表达式!

{this.state.game === 'Cricket' ? (
  // Renders when game mode is 'Cricket'
  <Cricket />
) : (
  // Renders when game mode is NOT 'Cricket'
  <SomeOtherGame />
)}