如何修正“表单标签必须与控件相关联”？ESlint

Question

我读过需要添加htmlFor来修复这个错误，但是即使有了这段代码，ESlint也会给出一个错误。我怎么才能解决这个问题？

        <input readOnly type="radio" name="slider-2" id="s1-2" checked />
        <input readOnly type="radio" name="slider-2" id="s2-2" />
        <input readOnly type="radio" name="slider-2" id="s3-2" />

        <label type="text" htmlFor="s1-2" id="slide1-2">
          <div className="slider-image">
            <img src={SecendQadroFirst} alt="qadro" />
          </div>
        </label>
        <label htmlFor="s2-2" id="slide2-2">
          <div className="slider-image">
            <img src={SecendQadroSecend} alt="qadro" />
          </div>
        </label>
        <label htmlFor="s3-2" id="slide3-2">
          <div className="slider-image">
            <img src={SecendQadroThird} alt="qadro" />
          </div>
        </label>

Answer 1

您需要将输入放在标签本身之间，并确保标签具有htmlFor属性。

<label type="text" htmlFor="s1-2" id="slide1-2">
   <div className="slider-image">
      <img src={SecendQadroFirst} alt="qadro" />
   </div>
   <input readOnly type="radio" name="slider-2" id="s1-2" checked />
</label>

Answer 2

您想要的<label>元素中的属性是for，并且该值必须是与其关联的<input>元素的id。输入应该在</label>结束标记之后。

<label type="text" for="s1-2" id="slide1-2">
   <div className="slider-image">
      <img src={SecendQadroFirst} alt="qadro">
   </div>
</label>
<input readOnly type="radio" name="slider-2" id="s1-2" checked>

<label for="s2-2" id="slide2-2">
   <div className="slider-image">
      <img src={SecendQadroSecend} alt="qadro">
   </div>
</label>
<input readOnly type="radio" name="slider-2" id="s2-2">
        
        
<label for="s3-2" id="slide3-2">
   <div className="slider-image">
       <img src={SecendQadroThird} alt="qadro">
   </div>
</label>
<input readOnly type="radio" name="slider-2" id="s3-2">