javascript - 如何更新自定义组件上的 onClick 引用？

Question

我尝试做的是使用我的子组件(即按钮)中的状态。单击我的子组件时，它的状态会发生变化。因此，我从 ref 获取父级中的状态，现在我尝试使用 Ref。

(最终目标是做一些事情链接 state of child ? <html/> : <html2/>

*如您所见，我尝试了一些解决方案，但到目前为止没有一个有效:/

Parent component

    export default class Chat extends Component { 
        constructor(props) {
            super(props);
            this.BtnRef = React.createRef();
          }

        componentDidMount() {
            const RefBtn = this.BtnRef.current.state;
            this.setState({RefBtn: RefBtn})
        }

        componentDidUpdate() {
            console.log(this.state.RefBtn)
            this.setState({RefBtn: RefBtn})
        }

        handleEvent = () => {
            this.setState({RefBtn: RefBtn})
        };

        render() {
            return (
                <div className={"a"} >
                    <div className={""} >
                        ok
                    </div>
                    <ChatButton ref={this.BtnRef} onPress={this.handleEvent} />
                </div>
            );
        }
    }

Child component

export default class ChatButton extends Component {
    state = {
        active: false,
    }

    getInitialState() {
        return { "showHideSidenav": "hidden" };
    }

    render() {
        const { onPress } = this.props;

        let a = (
            <svg className="bi bi-envelope" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fillRule="evenodd" d="M14 3H2a1 1 0 00-1 1v8a1 1 0 001 1h12a1 1 0 001-1V4a1 1 0 00-1-1zM2 2a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2H2z" clipRule="evenodd" />
                <path fillRule="evenodd" d="M.071 4.243a.5.5 0 01.686-.172L8 8.417l7.243-4.346a.5.5 0 01.514.858L8 9.583.243 4.93a.5.5 0 01-.172-.686z" clipRule="evenodd" />
                <path d="M6.752 8.932l.432-.252-.504-.864-.432.252.504.864zm-6 3.5l6-3.5-.504-.864-6 3.5.504.864zm8.496-3.5l-.432-.252.504-.864.432.252-.504.864zm6 3.5l-6-3.5.504-.864 6 3.5-.504.864z" />
            </svg>
        )
        let b = (
            <svg className="bi bi-envelope-open" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fillRule="evenodd" d="M.243 6.929l.514-.858L8 10.417l7.243-4.346.514.858L8 11.583.243 6.93z" clipRule="evenodd" />
                <path fillRule="evenodd" d="M7.184 10.68L.752 14.432l-.504-.864L6.68 9.816l.504.864zm1.632 0l6.432 3.752.504-.864L9.32 9.816l-.504.864z" clipRule="evenodd" />
                <path fillRule="evenodd" d="M8.47 1.318a1 1 0 00-.94 0l-6 3.2A1 1 0 001 5.4V14a1 1 0 001 1h12a1 1 0 001-1V5.4a1 1 0 00-.53-.882l-6-3.2zM7.06.435a2 2 0 011.882 0l6 3.2A2 2 0 0116 5.4V14a2 2 0 01-2 2H2a2 2 0 01-2-2V5.4a2 2 0 011.059-1.765l6-3.2z" clipRule="evenodd" />
            </svg>
        )
        return (
            <button 
                className={this.state.active ? "btn btn-primary btn-circle btn-xl false" : "btn btn-primary btn-circle btn-xl true"} 
                onClick={() => {
                    this.setState({ active: !this.state.active });
                    onPress();
                }} >
                {this.state.active ? b : a}
            </button>
        );

    }

    toggleChat() {
        var css = (this.state.showHideSidenav === "hidden") ? "show" : "hidden";
        this.setState({ "showHideSidenav": css });
    }
}

Answer 1

要解决这个问题，您不需要使用 refs，您可以像您已经完成的那样从子组件中触发一个事件。父组件将有其状态，如下所示:

state = {
  visible: false
}

您还需要为该事件添加一个处理程序:

handleToggle = () => {
  this.setState(visible => ({ visible: !visible }));
}

<ChatButton onPress={this.handleToggle} />

最后将状态传递给子级:

<ChatButton onPress={this.handleToggle} active={this.state.visible} />

这样，在子进程中你就可以切换你的 JSX

一个提示:不要使用引用，在大多数情况下你不需要它，尝试找到如何在没有它们的情况下做某事的方法。 Refs 通常很难调试