Question

我呈现了contentEditable的项目列表。当我将焦点切换到第二个元素时，第一个元素仍然是白色。我以为颜色切换语句（使用this.state.active检查）可以工作，但是很明显，我在这里缺乏思想。你会怎么做？我必须改为在Comments组件/容器中实现逻辑吗？

在父容器 comments.tsx 中，我使用以下方式呈现注释：

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

，并且在 comment.tsx 中，我有

interface IProps {
        key: number;
        profile: IProfile;
        data: object;
    }
    
    export class Comment extends React.Component<IProps, any> {
        constructor(props: IProps) {
            super(props);
            this.state = {
                editableColor: 'green',
                active:false
            }
        }
    
        editReview = (e, data) => {
            let { _id, user, comm } = data;       
            this.setState({active: true}, function () {
                this.state.active ? this.setState({editableColor:'#ffffff'}) : this.setState({editableColor:'green'});
            });    
        }
    
        render() {
            let { key, profile, data } = this.props;

            return(
                <div className="col-8 comment">
            
                    <p id="comment" contentEditable style={{backgroundColor: this.state.editableColor}} 
                          onFocus={(e) => this.editReview(e, data)}
                    >
                        {data['comm']}   
                    </p>
                
                    <button onClick={(e) => this.update(e, data)}>Update</button>
                </div>
            );
        }
    }

Answer 1

在我看来，您永远不会从活动状态恢复过来，您应该实现一个onBlur事件处理程序以将state.active还原为false：

...
<p
  id="comment"
  contentEditable style={{backgroundColor: this.state.editableColor}} 
  onFocus={(e) => this.editReview(e, data)}
  onBlur={ () => this.setState({ active: false }) }
>
  {data['comm']}   
</p>
...

Answer 2

实际上很容易。和往常一样，我应该在 comments.tsx

中将editableColor作为对Component的支持

<Comment key={key} profile={this.state.profile} data={value} editableColor={'green'}/>

将其作为道具放在 comment.tsx

中

let { key, profile, data, editableColor } = this.props;

根据焦点/模糊切换颜色

editReview = (e, data) => {
    this.setState({active: true});
}

<p 
    id="comment" 
    contentEditable 
    style={{backgroundColor: this.state.active ? editableColor='#ffffff' : editableColor}} 
    onFocus={(e) => this.editReview(e, data)}
    onBlur={ () => this.setState({ active: false }) }
>

焦点切换到下一个元素后如何将元素切换回其原始颜色

2 个答案: