使复选框可单击

Question

我正在使用ReactJs应用程序，并且我已经使用表单创建了一个模态。我的问题看起来像这样：

在这里，所有图像都连接到单独的单选按钮，当用户点击单选按钮时，它会进行相关选择。 但是，即使用户点击图像而不是直接点击单选按钮，我希望单选按钮被触发，我该怎么做？

我的HTML：

＆＃13;

＆＃13;

  
<div>
  <div className="category-card">
    <label htmlFor="square">
      <div className="card-icon">
        <img src="/img/icons/recommendation/square.svg"/>
      </div>
    </label>
    <div className="card-input">
      <input type="radio" name="categories" value="square" checked={this.state.filters.categories == "square"} onChange={this.handleFilterChange.bind(this)}  id="square"/>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将用于 -attribute与每个标签 -tag一起使用。所以标签 某个输入字段 square 换句话说。

希望这会对你有所帮助。

  

<div>
    
    <label for="square">
      <img src="/img/icons/recommendation/square.svg"/>
    </label>
    <input type="radio" name="categories" value="square" id="square"/>
    
    <label for="square2">
      <img src="/img/icons/recommendation/square.svg"/>
    </label>
    <input type="radio" name="categories" value="square2" id="square2"/>
    
</div>

Answer 2

不确定它在React中是如何工作的，但您应该能够移动结束</label>标记：

<div>
  <div className="category-card">
    <label htmlFor="square">
      <div className="card-icon">
        <img src="/img/icons/recommendation/square.svg"/>
      </div>
      <div className="card-input">
        <input type="radio" name="categories" value="square" checked={this.state.filters.categories == "square"} onChange={this.handleFilterChange.bind(this)}  id="square"/>
      </div>
    </label>
  </div>
</div>

我还在最后添加了似乎缺少</div>的内容。