Question

我正在尝试创建一个以石头，纸和剪刀作为反应的游戏。我认为为此使用一种形式是有意义的，我会至少使用一种形式来进行反应。

我认为最简单的方法是三个广播输入和一个提交。

但是，由于我要使用三张图片作为实际的单选按钮。使用一个表单甚至有意义，因为react旨在使状态脱离表单。这是我的代码中意识到我可能会陷入困境的关键点。

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

  render() {
    return (
      <div>
        <div>
          <form>
            <input type="radio" value="Rock" name="gender" onChange={this.onChangeHandler} /> Rock
            <input type="radio" value="Paper" name="gender" onChange={this.onChangeHandler} /> Paper
            <input type="radio" value="Scissor" name="gender" onChange={this.onChangeHandler} /> Scissor
            <input type="submit" value="Submit" onClick = () => {submit()}/>
          </form>
        </div>

        <div>
          <img id="r" value="rock" src="http://www.jerrylow.com/demo/rps/rock.svg" alt="a rock" />
          <img id="p" value="paper" src="http://www.jerrylow.com/demo/rps/paper.svg" alt="a piece of paper" />
          <img id="s" value="scissor" src="http://www.jerrylow.com/demo/rps/scissor.svg" alt="a scissor" />
        </div>)
  }

即使表格没有特殊用途，也应该使用此表格。如果是，我应该如何将其与img元素集成？

Answer 1

您有几种解决方法。您可以完全放弃该表单，并将onClick侦听器附加到每个图像上，这些图像在单击时会修改状态，然后有一个按钮，在单击时会调用提交功能。

或者，如果您希望保留表单，则可以将单选按钮和图像包装在标签中，隐藏单选按钮，以便在单击图像时将触发onChange。或者，您可以在标签上指定与单选按钮的ID匹配的for道具，并在其中包含图片，其行为将与前面所述的类似，例如

<input type="radio" id="myButton" onChange={handleChange} />
<label for="myButton"><img src="img.png" /></label>

我想这真的取决于您想要的解决方案，因为任何一种方式都可以。我个人宁愿不纯粹出于这种情况而不使用表单，因为这不是必需的，并且代码会更小。

React IMG单选按钮的使用表格

1 个答案: