Reactで垂れ流し一人チャットルーム
13188 ワード
create-react-app
で作成したプロジェクトのApp.js
を編集。
通信なし。リストを操作するだけ。
import React, { Component } from 'react';
class Response extends Component {
render() {
return (
<div>
<span>{this.props.name}</span>:
<span>{this.props.content}</span>
</div>
);
}
}
class ResponseList extends Component {
render() {
return (
<div>
<ul>
{this.props.responseList.map(r => <li>
<Response name={r.name} content={r.content} />
</li>)}
</ul>
</div>
);
}
}
class CommentForm extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
content: '',
};
this.handleNameChange = this.handleNameChange.bind(this);
this.handleContentChange = this.handleContentChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleNameChange(ev) {
this.setState({
name: ev.target.value.toUpperCase(),
})
}
handleContentChange(ev) {
this.setState({
content: ev.target.value,
})
}
handleSubmit(ev) {
ev.preventDefault();
this.props.onSubmit(ev, this.state);
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.name} onChange={this.handleNameChange} placeholder="Name" />
<textarea value={this.state.content} onChange={this.handleContentChange} placeholder="Content">
</textarea>
<input type="submit" value="送信" />
</form>
);
}
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
responseList: [],
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(ev, state) {
this.state.responseList.push({
name: state.name,
content: state.content,
});
this.setState({
responseList: this.state.responseList,
});
}
render() {
return (
<div className="App">
<CommentForm onSubmit={this.handleSubmit} />
<ResponseList responseList={this.state.responseList} />
</div>
);
}
}
export default App;
Author And Source
この問題について(Reactで垂れ流し一人チャットルーム), 我々は、より多くの情報をここで見つけました https://qiita.com/narupo/items/60ec5e2c56950b5e0f6f著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .