如何在客戶組件上更新我的參考 onClick？

Question

我嘗試做的是使用我的子組件中的 state ，這是一個按鈕。 單擊時，我的子組件的 state 會發生變化。 因此，我從 ref 的父級中獲得了它的 state，現在我嘗試使用 Ref。

（最終目標是做一些鏈接state of child? <html/>: <html2/>

*如您所見，我嘗試了一些解決方案，但到目前為止都沒有奏效：/

父組件

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

子組件

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，如下所示：

state = {
  visible: false
}

您還需要為事件添加處理程序：

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

<ChatButton onPress={this.handleToggle} />

最后將 state 傳遞給孩子：

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

這樣，在孩子中你可以切換你的 JSX

一個提示：不要使用 refs，在大多數情況下你不需要它，試着想辦法在沒有它們的情況下做某事。 Refs 通常很難調試