反応を使用してスタイルをストライクオフに切り替える方法

Question

反応を使ってToDoアプリケーションを作成し、テキストの装飾を変更する際に問題に直面しました。チェックボックスをオンにしてチェックボックスをクリックすると、スタイルが取り消し線に変わります。コードは次のようになります。

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; 

console：textDecorationが未定義です。助けが必要

Answer 1

チェックボックスのチェック状態の状態を定義し、クラスの状態を含めてリストに動的に追加する必要があります。あなたのToDoを作成する際、それをこの

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>