1 Buttonクリックしたときに、テキストの値を受け取りたい。
■やりたいこと
［テキストフィールド］［ボタン］
ボタンクリックした時に、テキストフィールドの値を受け取りたい。
https://ja.reactjs.org/docs/forms.html
理解したイメージ
1.大枠のクラスの中にstateとして、変更される値（今回はテキストフィールドの値）を保持する入れ物を作成する。
2.handleChangeファンクションを作成して、テキストの値を変更したら、その値がstateの値を変更するようにする。この時、handleChange側に渡す引数のeは省略して書くと、あとでerrorのeと混同してしまうのは、まだ自分がjavaScriptに慣れていないからなのかもしれない。
3.ボタン側のイベントとしてhandleClickを用意する。handleClickで大域変数的なstateの値を利用することによって、ボタンで部品の値を受け取ることが可能。
Sample1.js
import React, { Component } from 'react';
import { Form, Button, Popover } from 'react-bootstrap'
class Sample1 extends Component {
constructor(props) {
super(props);
this.state = {//使いたい値を入れる箱
drink: null,
};
this.handleDrinkChoice = this.handleDrinkChoice.bind(this);
this.handleDrinkClick = this.handleDrinkClick.bind(this);
}
handleDrinkChoice(event) {
this.setState({ drink: event.target.value });
}
handleDrinkClick() {
alert("your choice is :" + this.state.drink + ".");
}
render() {
return (
<div>
<Form>
<Form.Group>
<Form.Label>coffe or tea</Form.Label>
<Form.Control type="text" placeholder="Input your choice."
value={this.state.drink} onChange={this.handleDrinkChoice} />
</Form.Group>
</Form>
<Button variant="primary" onClick={this.handleDrinkClick}>Submit</Button>
</div>
);
}
}
export default Sample1;