onClick中的一个项目 <li> 改变颜色

Question

我只是想改变列表中一个项目的颜色。 但是，当我单击列表项时，列表中的所有项都变为白色（#ffffff）。 如何才能为所点击的项目实现颜色变化？ 我是否误解了调用语境'this'。

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>
               )
}

Answer 1

你似乎过分复杂了你的问题。 在反应中，我们使用组合来分解元素，这使得单个组件状态更容易处理。 一个好的经验法则是，如果要渲染多个组件，每个组件都需要各自相同的状态，请创建一个新组件！

以下是使用两个组件实现所需功能的示例：

 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>
        );
      }
    }

上面的app组件呈现了我们的所有评论。 下面的注释组件呈现每个单独的注释和控件状态。

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网站上阅读Composition vs Inheritance 。 这可以帮助您更好地理解如何在React中思考。

Answer 2

您正在为州中的每个注释元素设置相同的值。 你需要把

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

在comments[]并且可以不变地更改当前的注释颜色值