javascript - React 中的删除线

Question

切换复选框时，如何将复选框标签的样式更改为删除线文本？

这些是我用来开发系统其余部分的方法。我应该在fComplete方法中添加什么以使此功能正常工作以及使用什么 CSS？

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>
          )}
          </pre>
        </div>
        </div>
        </div>
      </div>
    );
  }
}

我尝试添加 CSS 标签，但没有得到所需的输出。请帮助我解决我应该添加的方法以及应该使用代码完成的其他更改。

标签： javascripthtmlcssreactjs

Answer 1

您需要将 a 传递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 });
}

我在这里做了一个非常简单的例子来向你展示它是如何工作的。