onClick элемент в <li>, чтобы изменить цвет - PullRequest
Новая
       12

onClick элемент в <li>, чтобы изменить цвет

0 голосов
/ 02 декабря 2018

Я просто собираюсь изменить цвет только одного элемента в списке.Однако, когда я щелкаю элемент списка, все элементы в списке становятся белыми (#ffffff).Как я могу добиться изменения цвета только для этого элемента?Я неправильно понимаю контекст вызова, также известный как «это». 

constructor(props) {
        super(props);

        this.state = {
            comm: '',
            editableColor: 'green',
            selected: false,
            comments: []
        }
}

updateReview = (event, key) => {
        this.setState({selected:true});
        this.state.comments[key]['comm'] ? this.setState({editableColor:'#ffffff'}) : '';
}

render() { 
       return (
                    <div className="comments">
                        <div>
                            {comments.map((value, key) => {
                                return (   
                                        <li key={key}>
                                            <div contentEditable style={{backgroundColor:this.state.editableColor}} onClick={()=>this.updateReview(value, key)}>
                                                {value['comm']}
                                            </div>
                                        </li>     
                                    );
                                })
                            }
                        </div>
                    </div>
               )
}

Ответы [ 2 ]

0 голосов
/ 02 декабря 2018

Вы, кажется, слишком усложняете свою проблему.В реакции мы используем композицию для разрушения элементов, что облегчает управление состоянием отдельных компонентов.Хорошее практическое правило заключается в том, что если вы визуализируете несколько компонентов, каждый из которых требует своего индивидуального и идентичного состояния, создайте новый компонент!

Вот пример того, как вы добились бы того, чего хотите, используя двакомпоненты: 

 class App extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          comments: [
            { comm: "First Comment" },
            { comm: "Secound Comment" },
            { comm: "Next Comment" }
          ]
        };
      }

      render() {
        return (
          <div className="comments">
            <div>
              {this.state.comments.map((value, key) => {
                return <Comment key={key} item={value} />;
              })}
            </div>
          </div>
        );
      }
    }

Компонент приложения выше отображает все наши комментарии.Компонент комментариев ниже отображает каждый отдельный комментарий и управляет состоянием. 

class Comment extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      editableColor: "green",
      selected: false
    };
  }

  updateReview = () => {
    this.setState({ selected: true });
    this.setState({ editableColor: "#ffffff" });
  };

  render() {
    return (
      <li class="comment">
        <div
          contentEditable
          style={{ backgroundColor: this.state.editableColor }}
          onClick={() => this.updateReview()}
        >
          {this.props.item.comm}
        </div>
      </li>
    );
  }
}

Намного проще понять, нет?

Вот CodeSandbox, выполняющий код выше: https://codesandbox.io/s/0xwqn27x40

Я рекомендую прочитать Состав против наследования на веб-сайте реагировать.Это должно помочь вам лучше понять, как мыслить в React.

0 голосов
/ 02 декабря 2018

Вы устанавливаете одинаковое значение для каждого элемента комментария в состоянии.Вам нужно поместить 

comm: '',
editableColor: 'green',
selected: false,

внутри comments[] и изменить значение цвета текущего комментария неизменно

...