byoigres byoigres - 1 month ago 9
Javascript Question

Get value of input from inner component with reactjs

I'm trying to get the value of the inner input element but every time I got this error:


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


What am

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

Did you mean this.containerInput.getValue() or this.containerInput.textInput.value ?

Comments