React JS - как передать данные input из одного компонента в другой
Изучаю реакт и для практики хочу написать небольшое приложение, но никак не могу найти решение для возникшей проблемы: как передать значение input для названия напитка из Drinkname в div Blank
Drinkname:
class Drinkname extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
submit: '',
glass: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
event.preventDefault()
this.setState({
glass: event.target.value
})
}
handleChange(event) {
event.preventDefault()
this.setState({
name: event.target.value
})
}
handleSubmit(event) {
event.preventDefault()
this.setState({
submit: this.state.name
})
}
render() {
return (
<form onSubmit={this.handleSubmit} class="form__column">
<label id="label_0" for="#drinkNameInput">Введите название напитка:</label>
<input value={this.state.name} onChange={this.handleChange} placeholder="..." type="text" name="drinkName" id="drinkNameInput" />
<div class="glass__headline">Выберите бокал:</div>
<div class="glass">
<button onClick={this.handleClick} value="rocks" title="Рокс" id="rocks" type="button"></button>
<button onClick={this.handleClick} value="oldFashion" title="Олд Фэшн" id="oldFashion" type="button"></button>
<button onClick={this.handleClick} value="tulipe" title="Тулип" id="tulipe" type="button"></button>
<button onClick={this.handleClick} value="wineRed" title="Для красного вина" id="wineRed" type="button"></button>
<button onClick={this.handleClick} value="wineWhite" title="Для белого вина" id="wineWhite" type="button"></button>
<button onClick={this.handleClick} value="shot" title="Шот" id="shot" type="button"></button>
<button onClick={this.handleClick} value="irish" title="Айриш" id="irish" type="button"></button>
<button onClick={this.handleClick} value="highball" title="Хайбол" id="highball" type="button"></button>
<button onClick={this.handleClick} value="hurricane" title="Харикейн" id="hurricane" type="button"></button>
</div>
<button id="buttonNext" type="submit">Далее</button>
<h3>{this.state.submit}</h3>
<h2>{this.state.glass}</h2>
</form>
)
}
};
Blank:
class Blank extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<>
<div class="header">
<div class="header__row">
<div class="orgInfo">
<div class="org__row">
<p class="defText">Организация:</p><p class="defText spec">ООО "Бештау" ОП "Отель Бештау"</p>
</div>
<div class="predp__row">
<p class="defText">Предприятие:</p><p class="defText spec">ООО "Бештау" ОП "Отель Бештау"</p>
</div>
</div>
<div class="orgConfirm__column">
<p class="defText">"УТВЕРЖДАЮ"</p>
<p class="defText">Руководитель ОП "Отель Бештау"</p>
<p class="defText">ООО "Бештау" Литвинова П.В.</p>
</div>
</div>
</div>
<div class="techinfo">
<div class="techinfo__column">
<div class="name__column">
<div class="input__row">
<label class="label" for="drinkName">Название блюда:</label><div class="drinkInput" type="text">{this.props.submit}</div>
</div>
<div class="input__row">
<label class="label" for="drinkWeight">Выход в готовом виде:</label><input class="drinkInput" type="text" id="drinkWeight" />
</div>
<div class="input__row">
<label class="label" for="drinkCreationDate">Дата составления карты:</label><input class="drinkInput" type="date" id="drinkCreationDate" />
</div>
</div>
</div>
<div class="techtable">
<div class="tablehead__row">
<div class="number column">
<div id="0">№</div>
</div>
<div class="name column">
<div id="name0">Наименование</div>
</div>
<div class="measurement column">
<div id="meas0">Ед. изм.</div>
</div>
<div class="brutto column">
<div id="bru0">Вес брутто</div>
</div>
<div class="netto column">
<div id="net0">Вес нетто</div>
</div>
<div class="totalWeight column">
<div id="tot0">Вес готового продукта</div>
</div>
<div class="portionWeight column">
<div id="por0">Вес нетто на порцию</div>
</div>
</div>
</div>
<div class="guide">
<div class="guide__column">
<div class="guide__headline">Технология приготовления и оформления</div>
<div class="guide__content">
<div id="step0">1.</div>
</div>
</div>
</div>
</div>
</>
)
}
};