Как изменить элемент реакции (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 является сторонним компонентом, его может быть сложно изменить).

Во-вторых, состояние зачеркивания, описанное выше, похоже на то, что оно должно быть внутренним относительно компонента User. Если все, что вы делаете, это изменение разметки в компоненте User на основе щелчка на компоненте User, тогда код зачеркивания должен быть в компоненте User. И, возможно, что более важно, если зачеркивание должно представлять что-то важное для состояния пользователя, то, что должно быть сохранено как часть состояния пользователя, тогда зачеркнутый флаг должен быть частью состояния пользователя (и иметь более информативное название, чем isStrikeThrough).