2017-08-23 24 views
0

私は、ReduxやFluxやそのフレームワークを使用していません。 複数のページで再利用したいReactコンポーネントがあります。グローバルからReactコンポーネントの状態にアクセスするにはどうすればよいですか?

これは視認性を制御する状態があります。

コンポーネントに手を加えて、標準のHTMLボタンから状態をトリガするにはどうすればよいですか?

ほとんどの回答はRedux/Flux/MobXを指していますが、SPA用ですが、Reineコンポーネントを搭載したフレームワークのないプレーンページです。

+0

可視値を格納するために隠し 'input'を追加しました。それを取得するために' ReactDOM'を使用しました –

+0

React Component内またはHTMLファイル内に 'standard HTML Button'がレンダリングされていますか? – alix

答えて

1

standard HTML ButtonReact Componentにレンダリングされないと仮定すると、ReactコンポーネントからHTML要素のイベントを聴くことができます。我々はHTMLファイル内に静的なボタンを持っていると言う:インサイド

<button id="buttonA">Toggle Visibility</button> 

私たちのコンポーネントを反応して、私たちは何かの可視性を設定するには、この要素のイベントをクリックして、私たちの状態を更新聞くことができます。

ここ
componentDidMount() { 
    // here we are listening our hard-coded static HTML Element's click event 
    // And update our state based on this. 
    document.getElementById('buttonA').addEventListener("click", e => { 
     this.setState({hidden: !this.state.hidden}) 
    }) 
    } 

working example on CodePenです。あなたはそれで遊ぶことができます。

+0

いいですね!ありがとう。 – resting

+0

@resting喜んで助けてください! – alix

関連する問題