>

React inClick의 스팬 컨텐츠에 라인 스루가 나타나기를 원합니다. 상태를 작성하여 li에 연관 시키려고 시도했습니다. 그러나 onclick은 모든 li 태그에 영향을 미칩니다. 특정 li 태그의 스타일 만 변경하고 싶습니다. 나는 반응을 느리게 배우고 천천히 배우려고 노력합니다.

import React from 'react';
class Todos extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      clicked: false
    };
  this.handleClick = this.handleClick.bind(this);
  }
  handleClick(){
    const click = this.state.clicked;
    console.log(click)
    if(click){
      this.setState({
        clicked: false
      })
    }
    else{
      this.setState({
        clicked: true
      })
    }
    console.log(this.state.clicked);
  }
  render() {
    return (
      <ul className="bg-warning p-4 list-group"> 
        {this.props.todos.length ? (
          this.props.todos.map(todo => {
            return (
              <li className="list-group-item" key={todo.id}>
                <span className="pr-2">{todo.content}</span>
                <button onClick={()=>{this.props.deleteTodo(todo.id)}}>Delete</button>
              </li>
            )
          })
        ) : (
          <p className="center">You have no todo's left, yay!</p>
        )}
      </ul>
    )
  }
}
export default Todos;


  • 답변 # 1

    @ eramit2010 답변은 의미가 있지만 할 일 항목 (예 : 스팬)을 클릭하면 line-through 를 표시 해야하는 요구 사항에 맞게 확장하고 있습니다.  삭제 버튼을 클릭하면 할 일 항목을 삭제하기 만하면됩니다.

    클릭 배열을 상태 배열로 유지해야합니다.

    state ={
      clickedTodo: []
    }
    
    

    line-through 를 표시하려는 범위에 별도의 클릭 이벤트가 있어야합니다. ,

    <span 
       className="pr-2" 
       style={{textDecoration: this.state.clickedTodo.includes(index) ? 'line-through' : 'none', paddingRight: '20px', cursor:'pointer'}} 
       onClick={() => this.lineThrought(todo.id)}
    >
       {todo.content}
    </span>
    
    

    여기서 CSS 를 적용했습니다  스팬 line-through 를 만들기 위해  클릭 될 때

    와이즈 비즈  방법은

    lineThrought
    
    

    데모

  • 답변 # 2

    삭제 된 id를 로컬 상태로 저장 한 다음 해당 perticular id가 상태에있는 경우 해당 클래스에 대한 사용자 정의 클래스를 사용할 수 있습니다.

    lineThrought = (id) => {
      if(this.state.clickedTodo.includes(id)){
        //To remove line-through
        this.setState({clickedTodo: this.state.clickedTodo.filter(item => item !== id)})
      }else{
        //To add line-through
        this.setState({clickedTodo: [...this.state.clickedTodo, id]})
      }
    }
    
    

    CSS 파일에서 :

    consturctor() {
       this.state = {
           deleted: []
       };
    }
    render() {
        return (
          <ul className="bg-warning p-4 list-group"> 
            {this.props.todos.length ? (
              this.props.todos.map(todo => {
                return (
                  <li className=`list-group-item ${this.state.deleted.includes(todo.id) ? "list-group-item-deleted" : ""}` key={todo.id}>
                    <span className="pr-2">{todo.content}</span>
                    <button onClick={()=> {
                        this.props.deleteTodo(todo.id);
                        this.setState(prevState => { deleted: [...prevState.deleted, todo.id]);
                    }>Delete</button>
                  </li>
                )
              })
            ) : (
              <p className="center">You have no todo's left, yay!</p>
            )}
          </ul>
        )
      }
    
    

    삭제 된 ID를 이미 redux에 저장하거나 다른 곳에 사용할 수있는 경우이를 사용할 수 있습니다.

  • 답변 # 3

    다른 사람이 li을 클릭하면 deleteTodo를 수행 할 때 deleteTodo를 수행한다고합니다. 특정 li 태그를 사용하면 componentdidmount () 함수 내에서 아래 코드를 사용하여 쉽게 수행 할 수 있습니다.

    .list-group-item-deleted { text-decoration: line-through }     

    그렇지 않으면 사용자가 이벤트를 클릭 한 다음 해당 ID를 상태로 사용하고 해당 색상을 변경하면 고유 ID를 기반으로 동적 상태를 사용해야합니다.

    $(document).on('click', 'your class name' , function() { $(this).css('color','red'); });

관련 자료

  • 이전 r - 자체에 대해 열 회귀
  • 다음 jquery - 단일 부모 요소가있는 자식으로 HTML을 빌드하기 위해 자바 스크립트에서 재귀