对 img 单选按钮的反应使用形式

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。或者，您可以在标签上指定一个 for prop 来匹配单选按钮的 id 并在其中包含图像，它的行为将如前所述，类似于

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

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

对 img 单选按钮的反应使用形式

React use form for img radio buttons

forms

image

radio

reactjs