Reactjs 添加复选框已选中事件以在列表中划掉的方法

我想在选中复选框时划掉列表中的一项。有什么方法可以应用它吗

多谢各位

class ToDoList extends React.Component {
    render() {
        return (
            <ol>
                {this.props.data.map(list => {
                    return (
                        <ol style={{
                            textDecoration: completed ? 'line-through' : 'none'
                          }}> 
                          <input type="checkbox" key={list.uuid} ></input>{list.text}</ol>
                    );
                })}
            </ol>
        );
    }
}

export default ToDoList;

类ToDoList扩展了React.Component{
render（）{
返回(
{this.props.data.map（列表=>{
返回(
{list.text}
);
})}
);
}
}
将默认值导出到列表；

您只需执行以下操作即可实现此目的：

 <ol style={ completed ? {textDecoration: 'line-through'} : {textDecoration: 'none'}}>

---

只需记住将“已完成”更改为与项目相关的布尔值，以便在选中时可以对其进行标记（例如，您可以通过onClick事件来实现）

您必须为所有项目设置

已完成的状态，在管理方式上可能会有所不同，但是我下面的代码假设
完成
状态将在您的组件状态上跟踪

class TodoList extends React.Component {
  state = {
    list: [
      { text: "Task 1", uuid: 1 },
      { text: "Task 2", uuid: 2 },
      { text: "Task 3", uuid: 3 },
      { text: "Task 4", uuid: 4 }
    ],
    isDone: {
      "1": true,
      "2": false,
      "3": true,
      "4": false
    }
  };

  handleChange = uuid => {
    this.setState({
      ...this.state,
      isDone: { ...this.state.isDone, [`${uuid}`]: !this.state.isDone[uuid] }
    });
  };

  render() {
    return (
      <ol>
        {this.state.list.map(item => {
          return (
            <ol
              style={{
                textDecoration: this.state.isDone[item.uuid]
                  ? "line-through"
                  : "none"
              }}
            >
              <input
                onChange={() => this.handleChange(item.uuid)}
                checked={this.state.isDone[item.uuid]}
                type="checkbox"
                key={item.uuid}
              ></input>
              {item.text}
            </ol>
          );
        })}
      </ol>
    );
  }
}

export default TodoList;

类TodoList扩展了React.Component{
状态={
名单：[
{文本：“任务1”，uuid:1}，
{文本：“任务2”，uuid:2}，
{文本：“任务3”，uuid:3}，
{文本：“任务4”，uuid:4}
],
isDone：{
“1”：对，
“2”：假，
“3”：对，
“4”：错误
}
};
handleChange=uuid=>{
这是我的国家({
…这个州，
isDone:{…this.state.isDone，[`${uuid}`]：！this.state.isDone[uuid]}
});
};
render（）{
返回(
{this.state.list.map（项=>{
返回(
this.handleChange（item.uuid）}
选中={this.state.isDone[item.uuid]}
type=“复选框”
key={item.uuid}
>
{item.text}
);
})}
);
}
}
将默认值导出到列表；
你能分享你想要的截图吗？你的意思是在截图旁边的文本中插入一行吗？