メモ
- return内にhtml記述(REACTではJSX
- return内は一つの要素のみ(要素が複数ある場合はdivなどで囲む
- コメントは{/* コメント */}
- imgタグには閉じタグが必要(img src="" />
- return内でのjsは{}内に記述(クォーテーションの有無に注意
render() {
const greeting = 'hello';
const imgUrl = 'https://aaa.com/aaa.png'
return(
<h1>{greeting}</h1>
<img src={imgUrl} / >
);
}
- stateはconstructor内に記述
- 値のセットはthis.setState({ プロパティ: 値});
- クラスはclassName="" で要素で指定
- <input>は<input />、<textarea></textarea>は<textarea />
<div onClick={ () => {this.myFunc()} } >
<form onSubmit={ () => {this.myFunc()} } >
<input onChange={ (event) => { event.target.value } } />
handleEmailChange(event) {
const inputValue = event.target.value;
this.setState({email: inputValue});
}
<input
value={this.state.email}
onChange={(event) => {this.handleEmailChange(event)}}
/>
コード
import React from 'react'; // 定型 パッケージの読み込み
class App extends React.Component { // 定型
constructor(props) { // 定型
super(props); // 定型
this.state = { name: '名前' };
this.count = { count: 0 };
}
handleClickName(name) {
this.setState({name: name});
}
render() { // 定型
return ( // 定型
<div>
<button onClick={ ()=> { this.handleClickName('名前2') }>ボタン1</button>
<h1>hello, {this.state.name}</h1>
<button onClick={ this.handleClickCount() }>ボタン2</button>
<p>{ this.state.count }</p>
</div>
);
}
}
export default App; // 定型
フォーム入力
import React from 'react';
class ContactForm extends React.Component {
constructor(props) {
super(props);
this.state = {
isSubmitted: false,
email: '',
hasEmailError: false,
content: '',
hasContentError: false,
};
}
handleEmailChange(event) {
const inputValue = event.target.value;
const isEmpty = inputValue === '';
this.setState({
email: inputValue,
hasEmailError: isEmpty,
});
}
handleContentChange(event) {
const inputValue = event.target.value;
const isEmpty = inputValue === '';
this.setState({
content: inputValue,
hasContentError: isEmpty,
});
}
handleSubmit() {
this.setState({isSubmitted: true});
}
render() {
let emailErrorText;
if (this.state.hasEmailError) {
emailErrorText = (
<p className='contact-message-error'>
メールアドレスを入力してください
</p>
);
}
let contentErrorText;
if( this.state.hasContentError ) {
contentErrorText = (
<p className='contact-message-error'>
お問い合わせ内容を入力してください
</p>
);
}
let contactForm;
if (this.state.isSubmitted) {
contactForm = (
<div className='contact-submit-message'>
送信完了
</div>
);
} else {
contactForm = (
<form onSubmit={() => {this.handleSubmit()}} >
<p>メールアドレス(必須)</p>
<input
value={this.state.email}
onChange={(event) => {this.handleEmailChange(event)}}
/>
{emailErrorText}
<p>お問い合わせ内容(必須)</p>
<textarea
onChange={ (event) => { this.handleContentChange(event) } }
value={ this.state.content }
/>
{contentErrorText}
<input
type='submit'
value='送信'
/>
</form>
);
}
return (
<div className='contact-form'>
{contactForm}
</div>
);
}
}
export default ContactForm;
関連リンク