如何在 React 功能组件中添加删除线或修改 css答案

【问题标题】：How to Add a line strikethrough or modify css in React Functional Component如何在 React 功能组件中添加删除线或修改 css
【发布时间】：2021-06-23 03:55:00
【问题描述】：

我正在尝试在单击相应的刻度按钮时添加线条罢工或更改列表元素的背景颜色请建议一种方法来这样做.. 有没有类似于jquery的前任的方法-$("p").css("background-color"); &对于初学者更适合掌握谁来自jq后台Class组件还是Functional

  const [input, setValue] = useState("");
  const [todos, setTodos] = useState([]);
  // passing  entered
  const handleInput = (event) => {
    setValue(event.target.value);
  };

  const lp = (event) => {
    // let c = [1,2,34,55]

    event.preventDefault();
    // if no input nothing will happen return none
    if (!input) return;
    // using spread operator its used whenever we need to add array data to exiting array
    const newTodos = [...todos, input];

    setTodos(newTodos);
    // clearing input text
    setValue("");
  };
  const handeldel=(index) => {
    // console.log(index)
  
    todos.splice(index, 1);
    setTodos([...todos]);  
   
    // const newTodos = todos.splice(index, 1);
    // setTodos([...newTodos]); 

  
  }

const markdone =() => {
  // how to mark complete
}

  return (
      <div>
        <h1 className="text-center font-weight-bolder alert-info mb-5">Tasks To Do <i class="fas fa-clipboard-list text-success"></i></h1>
        <div class="input-group mb-3 container">
          <input
            className="form-control border-primary font-weight-bold"
            style={{ height: 60 }}
            placeholder="Enter Text here"
            type="text"
            value={input}
            onChange={handleInput}
          />
          <div class="input-group-append">
            <button
              className="input-group-append font-weight-bolder "
              style={{ fontSize: 20 }}
              onClick={lp}
            >
              {" "}
              <i class="fas fa-plus-square fa-2x p-2"></i>{" "}
            </button>
          </div>
       
        </div>
        {todos.map((x,index) => (
          <ol  style={{ listStyle:"outside" }} className="container">
            <li className="font-weight-bolder table-bordered text-capitalize alert-secondary " style={{fontSize:30}}>
              { x }<i class="fas fa-check-circle float-md-right text-success" onClick={markdone}></i>  <i class="fas fa-trash-alt  text-danger float-md-right" onClick={()=>handeldel(index)}></i>
            </li>
          </ol>
        ))}

        
        {/* for future ref */}
            {/* <div >
        {data.map((user) => (
          <div className="user">{user.id + "  " + user.name 
          }</div>
        ))}
      </div> */}
      </div>
  );

【问题讨论】：

标签： javascript html css reactjs react-native

【解决方案1】：

我在这里为您创建了代码 https://codesandbox.io/s/pensive-chaplygin-ry5ed?file=/src/App.js

我更改的主要内容是我使用 uuid(npm i uuid) 向每个新 li 以及已完成状态添加了一个 Id。

我还向 markdone 函数传递了一个事件参数

const markdone = (e) => {
    const element = todos.findIndex((el) => el.id === e.target.id);


    const newToDos = [...todos];
    console.log(element);
    
    newToDos[element] = {
      ...newToDos[element],
      completed: !newToDos[element].completed
    };
    setTodos(newToDos);
 
  };

所以首先我试图通过比较ID来找到元素目标元素的索引。

然后我克隆数组并使用扩展运算符返回元素，但将完成状态更改为相反。所以如果它是真的，那么它就会变成假的，反之亦然。

在<li> 上，我正在传递一个基于“已完成”状态的条件类名。因此，如果 completed 为真，那么它将获得一类“li-completed li”，如果它不是真的，那么它将获得一类“li”。当然，您可以在 css 上定位这些类。

请查看上面的链接以获取完整的更改。

【讨论】：

@Lp-Tester 我更新了链接，现在你可以看到整个代码

【解决方案2】：

感谢您帮助我获得了一种更简单的方法来实现，只需使用以下标记完成功能上的切换功能可能对初学者有用

 const [line, setline] = useState(false);

const markdone = (index) => {
    console.log(todos,index)
    setline(!line);
   
    // setll(true);
  };

【讨论】：