Зачеркнутый в Реакции

Question

Как изменить стиль метки флажка на зачеркнутый текст при его переключении?

Это методы, которые я использовал для разработки остальной части моей системы. Что я должен добавить в метод fComplete, чтобы эта функция работала, и какую CSS использовать?

<code>constructor(props){
    super(props);
    this.state={
      title: 'Todo List',
      act: 0,
      index: '',
      datas: []
    }
  }

  componentDidMount(){
    this.refs.input.focus();
  }

  fSubmit = (e) =>{
    e.preventDefault();
    console.log('try');

    let datas = this.state.datas;
    let input = this.refs.input.value;

    if(this.state.act === 0){   //new
      let data = {
        input
      }
      datas.push(data);
    }else{                      //update
      let index = this.state.index;
      datas[index].input = input;
    }

    this.setState({
      datas: datas,
      act: 0
    });

    this.refs.myForm.reset();
    this.refs.input.focus();
  }

  // What should I add here on this method?
  fComplete = (i) => {

  }

  fRemove = (i) => {
    let datas = this.state.datas;
    datas.splice(i,1);
    this.setState({
      datas: datas
    });

    this.refs.myForm.reset();
    this.refs.input.focus();
  }

  fEdit = (i) => {
    let data = this.state.datas[i];
    this.refs.input.value = data.input;

    this.setState({
      act: 1,
      index: i
    });

    this.refs.input.focus();
  }

  render() {
    let datas = this.state.datas;
    return (
      <div className="big-banner">
        <NavBar/>
        <div className="col-10 mx-auto col-md-5 mt-4">
          <div className="card card-body my-3 bg-dark">
            <h3 className="text-capitalize text-center text-white">Add Items</h3>
            <br/>
            <form ref="myForm" className="myForm " aria-required="true">
              <div className="input-group">
                <div className="input-group-prepend">
                  <div className="input-group-text bg-transparent text-white">
                    <i className="fas fa-book"></i>
                  </div>
                </div>
                <input type="text" ref="input" className="form-control text-capitalize" placeholder="add a todo item"></input>
              </div>
              <button type="submit" onClick={(e)=>this.fSubmit(e)} className="btn btn-block btn-primary bg-secondary mt-3 text-capitalize">add Item</button>
            </form>

            <br/><br/>
          <h3 className="text-capitalize text-center text-white">todo items</h3>
          <div className="card card-body my-3 bg-dark">
          <pre className="reverse-list">
          {datas.map((data, i) =>
          <li key={i} className="list-group-item text-capitalize d-flex
            justify-content-between my-2">
//Checkbox
            <label className="container text-center mt-1">{data.input}
              <input type="checkbox"/>
                <span className="checkmark text-dark bg-dark mt-1"></span>
            </label>
            <div className="todo-icon  mt-2">
                    <span className="mx-2 text-dark mt-xl-5">
                        <i className="fas fa-pen" onClick={()=>this.fEdit(i)}></i>
                    </span>
              <span className="mx-2 text-dark">
                        <i className="fas fa-trash" onClick={()=>this.fRemove(i)}></i>
                    </span>
            </div>
          </li>
          )}
          

); }}

Я пытался добавить теги CSS, но не получил требуемого вывода. Пожалуйста, помогите мне с методами, которые я должен добавить, и другими изменениями, которые должны быть сделаны с кодом.

Answer 1

Вам необходимо передать ref на ваш ярлык и использовать его для управления css и передать обработчик onClick (fComplete) на ваш флажок.

На части, которую вы визуализируйте метку и флажок, передайте ref:

  // Make sure to create the ref at the beginning
  <label className="container text-center mt-1" ref={createdRef}>{data.input}
    <input type="checkbox" onClick={fComplete}/>
    <span className="checkmark text-dark bg-dark mt-1"></span>
  </label>

при fComplete вам необходимо использовать ref, назначенный надписи выше! Псевдокод будет выглядеть примерно так:

const fComplete = () => {
  if (state.labelChecked === false) {
    // This will set the strikethrough
    labelRef.current.style.textDecoration = "line-through";
  } else {
    // This will remove it
    labelRef.current.style.textDecoration = "none";
  }

  // And here you guarantee you're toggling the state
  setState({ labelChecked: !state.labelChecked });
}

Я сделал очень простой пример , чтобы показать вам, как он работает.