Хочу связать input и h1, чтобы когда что то пишешь то заголовок менялся.
// Компонент родитель через которого я передаю значение от одного ребенка к другому
class Container extends React.Component{
constructor(props) {
super(props);
this.state = {
title: "Hello World"
};
};
setTitle = (text) => {
if(text!=null)
this.setState ({ title: text});
}
render(){
return (
<div className="container">
<Constructor_template titlename={ this.state.title } />
<Ready_template updatetitle={ this.setTitle } />
</div>
);
}
}
//Дочерний компонент с input
class Constructor_template extends React.Component{
update = () =>{
this.props.updatetitle(this.refs.text.value);
}
render(){
return (
<form action="" className="constructor-template">
<div className="name-template">
<h2>Введите название шаблона</h2>
<input type="text" ref="text" onChange={this.update}></input>
</div>
<input type="submit" value="Сохранить шаблон"></input>
</form>
);
}
}
//Дочерний компонент с h1
class Ready_template extends React.Component{
render(){
return (
<div className="ready-template" >
<form className="interview-container" >
<h1>{this.props.titlename}</h1>
<input type="submit"></input>
</form>
</div>
);
}
}
