用于 img 单选按钮的 React 使用表单

Question

我正在尝试在 react 中创建一个石头剪刀布游戏。我会假设为此使用表单是有意义的，我至少会使用表单而不是用于反应。

我认为最简单的方法是三个无线电输入和一个提交。

但是，因为我想使用三张图片作为实际的单选按钮。使用表单是否有意义，因为 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>

我想这真的归结为您想要的解决方案，因为任何一种方式都可以。我个人不希望纯粹在这种情况下使用表单，因为它不是必需的，而且代码会更小。