Question

嗨，我正在尝试在我的

元素上应用样式，然后单击我的复选框，我完全确定如何选择元素

我尝试使用ref和id，但是没有成功

{this.props.articles.map（el =>（

                <li className="list-group-item" id={el.id}>
                    {el.title}
                <button  type="button" className="btn  btn-lg-4 buttonContainer buttonRight" id={el.id} onClick={this.handleDelete}>
                X
                </button>
                <input type="checkbox"  className="inputLeft list-group-item" id={el.id} onClick={this.handleChecking}/>
                </li>
            ))}
        </ul>


    handleChecking(el){

        if (el.target.checked) {
        console.log('true');
        var idLi = el.target.id;
        console.log("id =" + idLi);
        this.ref.
        //console.log(this.ref.value(idLi));

        }

当选中此复选框时，我想在具有相同id

的

元素上应用文本装饰风格：

Answer 1

类似这样的东西


this.state = {
     elementClicked: false, 
     elementId : 0
}
const {elementClicked, elementId} = this.state;
 <ul>
{this.props.articles.map(el => (

                <li className="list-group-item" {elementClicked && elementId === el.id ? /*set your style*/ : /*remove style*/} {id={el.id}>
                    {el.title}
                <button  type="button" className="btn  btn-lg-4 buttonContainer buttonRight" id={el.id} onClick={this.handleDelete}>
                X
                </button>
                <input type="checkbox"  className="inputLeft list-group-item" id={el.id} onChange={() => this.handleChecking(el.id)}/>
                </li>
            ))}
        </ul>


    handleChecking(elementID){
  // grab element id 
const {elementClicked, elementId} = this.state;
this.setState({  
    elementClicked: !elementClicked,
    elementId
})
        if (el.target.checked) {
        console.log('true');
        var idLi = el.target.id;
        console.log("id =" + idLi);
        this.ref.
        //console.log(this.ref.value(idLi));

        }

如何在组件内选择元素

1 个答案: