可重複使用的反應複選框組件與圖像沒有ID

我想爲複選框做一個可重用的React組件。可重複使用的反應複選框組件與圖像沒有ID

現在，我知道什麼是標準的圖像替換複選框的樣子，所以這裏是我的陣營項目：

import React, { Component } from 'react'; 

class Checkbox extends Component { 
    render() { 
    return (
     <div className="checkbox"> 
     <input type="checkbox" name="thing" value="valuable" id="thing"/><label for="thing"></label> {this.props.text} 
     </div> 
    ); 
    } 
} 

export default Checkbox;

而這裏的一般CSS：

input[type=checkbox] { 
    display:none; 
} 

input[type=checkbox] + label { 
    background: url("checked.png") no-repeat; 
    background-size: 100%; 
    height: 20px; 
    width: 20px; 
    display: inline-block; 
    padding: 0; 
} 
input[type=checkbox]:checked + label { 
    background: url("unchecked.png") no-repeat; 
    background-size: 100%; 
    height: 20px; 
    width: 20px; 
    display: inline-block; 
    padding: 0; 
}

現在，因爲這是React，我希望能夠重用這個組件。但是，我不能重用一個ID。我應該怎麼做一個複選框來替換原生複選框？如果沒有這種「標籤」方法，有沒有辦法做到這一點？ 我寧願不使用隨機數作爲ID，或者沿着這些線。

來源

2017-02-17 Cassidy Williams

@AndrewLi據我所知，黑客不無標識工作，因爲標籤通過ID附加到輸入。 –

[如何爲React中的表單標籤生成唯一ID？]（http://stackoverflow.com/questions/29420835/how-to-generate-unique-ids-for-form-labels-in-react） – Li357

我不懷疑有另一種方式來做到這一點。 ID必須是唯一的，並且您必須每次爲ID生成一些獨特的內容，否則您無法真正擁有標籤。 – Li357

將實例化它時，將id作爲通道傳遞給組件。

<Checkbox id="whatever" value={state.valueOrWhatever} text="Change The Value!" />

在您的組件（注意JSX for是htmlFor）：

<input type="checkbox" name={this.props.id} value={this.props.value} id={this.props.id} /> <label htmlFor={this.props.id}></label> {this.props.text}

來源

2017-02-18 14:47:10

謝謝！聰明的想法。 –

可重複使用的反應複選框組件與圖像沒有ID

回答

相關問題