Сделать клетку с надписью clickable

Question

Я работаю над приложением ReactJs, и я создал модальную форму. Мой вопрос выглядит следующим образом:

За здесь все изображения связаны с отдельными кнопками радио, и это делает соответствующий выбор, когда пользователь нажимает на кнопку радио. Но я хочу, чтобы переключатель переключался, даже когда пользователь нажимает на изображение, а не прямо на переключателе, как я могу это сделать?

Мой HTML:

 
<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>

Answer 1

Вы можете использовать для с каждым атрибута по этикетки в тег. Таким образом, ярлык для определенное поле ввода квадрат Другими словами.

Надеюсь, это вам поможет.

 

 
<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

Не знаю, как это работает в Реагировать, но вы должны быть в состоянии, чтобы переместить закрытия </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> в конце.