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[]内并不变地更改当前评论的颜色值

单击<li>中的项目以更改颜色

2 个答案: