反応要素（li）をonClickで変更すると、取り消し線になりますか？

Question

私はそれをクリックすると取り消し線になるように要素を設定しようとしていましたが、残念ながら私はできませんでした。何も起こりません。

var UserList = React.createClass({ 
    getInitialState: function() { 
     return { 
      user: [], 
      firstName: '', 
      lastName: '', 
      createdAt: 0, 
      isClicked: false, 
     }; 
    }, 

handleOnClick: function() { 
    var isClicked = this.state.isClicked; 
    var style = {textDecoration: 'none'}; 
    if (isClicked === true) { 
     style = {textDecoration: 'line-through'} 
    } 
}, 

render: function() { 

return (
    <div> 
     <Users user={this.state.user} onClick={this.handleOnClick}/> 

    </div> 
    ); 

Answer 1

ストア状態のフラグに「取り消し線」値とrender機能でそれを行います。例えば

：

getInitialState: function() { 
    return { 
     ... 
     isStrikeThrough: false, 
     ... 
    } 
}, 

onHandleClick: function() { 
    .... 
    // toggle the strikethrough state 
    this.setState({isStrikeThrough: !this.state.isStrikeThrough}); 
    .... 
}, 

render: function() { 
    return (
     <div> 
      <User 
       user={this.state.user} 
       strikeThrough={this.state.isStrikeThrough} 
       onClick={this.handleOnClick} 
      /> 
     </div> 
    ); 
}, 

あなたはUserコンポーネントについての詳細は与えられていないので、上記の説明は、単に私たちが疑問に持っているものに基づいています。つまり、これを改善できる方法がいくつかあります。

まず、取り消しフラグをUserコンポーネントに追加して、<strike>...</strike>（またはこれに類するCSSスタイル）をレンダリングできると仮定しています。それが当てはまるかもしれないし、そうでないかもしれない（すなわち、Userコンポーネントが第三者コンポーネントである場合、それを変更するのは難しいかもしれない）。

第2に、前述の取り消し線の状態は、Userコンポーネントの内部にあるように見えます。取り消し線コードがUserコンポーネントのクリックに基づいてUserコンポーネントのマークアップを変更する場合は、取り消し線コードはUserコンポーネントにある必要があります。そして、もっと重要なのは、取り消し線がユーザーの状態に関する重要な何か、ユーザーの状態の一部として保存されるべきものを表すと想定される場合、取り消し線フラグはユーザーの状態の一部であるべきである（そして、より有益な名前isStrikeThroughより）。