親コンポーネントを反応させるために、ボタンをクリックして、サブアセンブリ入力フォーカス

核となるアイデア

• コンポーネントは、親定義this.state.focus=false）props.fosusフォーカスを（実行するかどうかを決定するために、このサブアセンブリ取得パラメータをサブアセンブリ着信を
• ボタンをクリックするとthis.setState再描画をレンダリングするトリガされます。この時点で、フォーカスを変更するには、サブアセンブリ得props.focusは、フォーカス実行するように更新され、
  ここで私が問題に遭遇
  、私はアセンブリisFocusが独自のメソッド息子を定義した
  
  後、レンダリングをこのメソッドの実装では、結果が望ましい結果を達成できませんでした。
  理由
  isFocusの実行時間は、レンダリング、その前にvar a = document.createElement('input')実行、この要素、取得されていない要素がない持っていた。DOMツリー内の魚の前に、この文を実行することが必要です。
  要するに
  isFocusが定義componentDidUpdate最初性能はcomponentDidMountあるが、あるため、今回の要素を得るために必要な初期化状態ではないが、それぞれの後に再描画をレンダリングし、次いでcomponentDidUpdateはDOM上で実行され、その魚をツリーは、要素を得ることができます。

Father.js

import React from "react"
import {render} from "react-dom"
import Son from "./Son.js"

class Father extends React.Component{
    constructor(){
        super();
        this.state={
            'focus':false
        };
        console.log("Father Constructor")
    }
    click(){
        this.setState({
            'focus':true
        });
    }
    render() {
        return(
            <div>
                <input type="button" value='父组件'  onClick={(this.click).bind(this)} />
                <Son focus={this.state.focus}/>
            </div>
        )
    }
}
export  default Father

Son.js

import React from "react"
import {render} from "react-dom"

class Son extends React.Component{
    constructor({focus}){
        super();


    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        var self = this;
        var a= document.getElementById('input');
        !function isFocus(){
            if (self.props.focus){
                a.focus()
            }
        }()
    }
    render() {

        return(
            <div>
                <input type="text" value='' ref='a' id='input'/>
            </div>
        )
    }
}
export  default Son

概要

テンプレートとしてであり得る：親コンポーネントサブアセンブリは、介入が必要な場合、変数に渡され、その後サブアセンブリを通ってもよいthis.props.val動作するかどうかを判断します