Как обновить мой ref onClick on custom component?

Question

Я пытаюсь использовать состояние моего дочернего компонента, которым является кнопка. Состояние моего дочернего компонента изменяется при нажатии на него. Итак, я получил состояние этого в родительском элементе из ссылки, и теперь я пытаюсь использовать 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 = {
  visible: false
}

Также вам необходимо добавить обработчик для события:

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

<ChatButton onPress={this.handleToggle} />

И, наконец, передать состояние дочернему элементу:

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

Чтобы в дочернем можно было переключить свой JSX

Один совет: не используйте refs, в большинстве случаев он вам не нужен, попробуйте найти способы, как делать что-нибудь без них. Refs часто очень сложно отлаживать