reactjsと内部コンポーネントからの入力の値を取得します

Question

私は内側のinput要素の値が、私はこのエラーまし毎回取得しようとしている：

Uncaught TypeError: this.containerInput.gatValue is not a function

だ何

class Input extends Component { 
    getValue() { 
    return this.textInput.value; 
    } 
    render() { 
    return (
     <input type="text" ref={(input) => this.textInput = input} /> 
    ); 
    } 
} 

class Container extends Component { 
    getValue() { 
    return this.containerInput.gatValue(); 
    } 
    render() { 
    return (
     <Input ref={(input) => this.containerInput = input} /> 
    ); 
    } 
} 

class View extends Component { 
    constructor(props) { 
    super(props); 
    this.buttonClick = this.buttonClick.bind(this); 
    } 
    buttonClick(e) { 
    console.log(this.viewInput.getValue()); 
    } 
    render() { 
    return (
     <div> 
     <Container ref={(input) => this.viewInput = input} /> 
     <button onClick={this.buttonClick}>Get Value</button> 
     <span></span> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <View />, 
    document.getElementById('root') 
); 

DEMOを

Answer 1

this.containerInput.getValue（）またはthis.containerInput.textInput.valueを意味しましたか？