javascript - 如何使用 React 切换复选框以将样式更改为删除线

Question

我使用 React 制作了待办事项应用程序，现在面临更改文本装饰的问题。我想切换复选框，以便当我单击复选框时，样式更改为删除线，反之亦然。代码如下:

import React, { Component } from 'react';
import ReactDom from 'react-dom';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  constructor(){
    super();
    this.state={
      todo:[]
    };
  };

  entertodo(keypress){
    var todo=this.refs.newtodo.value;
    if( keypress.charCode == 13 )
    {
      this.setState({
        todo: this.state.todo.concat(todo)
      });
      this.refs.newtodo.value=null;
    };
  };
  todo(data,i){
    return (
      <li>
      <input type="checkbox" onChange={this.todoCompleted.bind(this)}className="option-input checkbox"/>
      <div key={data.id} className="item">
      {data}
      <button onClick={this.remove.bind(this,i)}className="destroy"></button>
      </div>

      </li>
    );
  };
  remove(i){
    var deletetodo = {...this.state.todo};
   this.state.todo.splice(i,1);
   this.setState({todo:this.state.todo})
 };
 todoCompleted(){
   var todo={...this.state.todo}
   if(this.state.checked){
     this.setState({
      todo:this.state.todo.style.textDecoration=='line-through'
     });
   }
   else {
     this.setState({
       todo:this.state.todo.style.textDecoration=='none'
     });
   }
 };

  render() {

    return (
      <div>
      <div className="lines"></div>
      <div>
      <input type="text" ref= "newtodo" onKeyPress={this.entertodo.bind(this)}className="inputext"placeholder='todos'/>
      </div>
      <div className="app">

      <ul>
      {this.state.todo.map(this.todo.bind(this))}

      </ul>
      </div>
      </div>
    );
  }
}

export default App;

在控制台中显示错误:textDecoration 未定义。需要帮助

Answer 1

您需要为复选框的选中状态定义一个状态，然后还为您的类包含一个状态并将其动态添加到列表中。在创建你的待办事项时，像这样做

this.setState({
            todo: this.state.todo.concat({value: todo, checked: false, textDecor: null})
          });

class App extends React.Component {

  constructor(){
    super();
    this.state={
      todo:[]
    };
  };

  entertodo(keypress){
    var todo=this.refs.newtodo.value;
    if( keypress.charCode == 13 )
    {
      this.setState({
        todo: this.state.todo.concat({value: todo, checked: false, textDecor: null})
      });
      this.refs.newtodo.value=null;
    };
  };
  todo(data,i){
    return (
     <li className={data.textDecor}>
      <input type="checkbox" onChange={this.todoCompleted.bind(this, i)}className="option-input checkbox" checked={data.checked} />
      <div key={data.id} className="item">
      {data.value}
      <button onClick={this.remove.bind(this,i)}className="destroy"></button>
      </div>

      </li>
    ); 
  };
  remove(i){
    var deletetodo = {...this.state.todo};
   this.state.todo.splice(i,1);
   this.setState({todo:this.state.todo})
 };
 todoCompleted(i){
   var todo=[...this.state.todo]
   
   if(!todo[i].checked){
     todo[i].checked = true;
     todo[i].textDecor='line'
     this.setState({ 
      todo
     });
   }
   else {
     todo[i].checked = false;
     todo[i].textDecor=null
     this.setState({
       todo
     });
   }
 };

  render() {

    return (
      <div>
      <div className="lines"></div>
      <div>
      <input type="text" ref= "newtodo" onKeyPress={this.entertodo.bind(this)}className="inputext"placeholder='todos'/>
      </div>
      <div className="app">

      <ul>
      {this.state.todo.map(this.todo.bind(this))}

      </ul>
      </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

.line {
  text-decoration: line-through;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>