Reactの練習で、リストの表示とリストへの追加のみのUIの画面を作っています。
入力フォームとリスト部分でコンポーネントを分けたため、その2つを内包する親コンポーネントにてstateの管理を行なっています。ソースコードに疑問の箇所を書かせていただいたのですがどなたかご教授いただけないでしょうか?そもそも実装としておかしいとい前提があればご指摘お願いできないでしょうか。」
App.js
class App extends React.Component { constructor(props) { super(props) this.state = [ { id:1, "user1" }, { id:2, "user2" } ] // ★疑問2 これを毎回書くもの? this.addItem = this.addItem.bind(this) } render() { return ( <div> <Form addItem={this.addItem} /> <Items items={this.state.items} /> </div> ) } addItem(text) { this.setState({ items: this.state.push({ id: 3, name: text }) }) } } export default App
Form.js
class Form extends React.Component { construct(props) { super(props) this.state = { text: '' } } render() { return ( <div> <input value={this.state.text} onChange={e => this.changeText(e)} /> <button onClick={e => this.addItem(e)}>Add</button> </div> ) } changeText(e) { this.setState({ text: e.target.value }) } addItem(e) { e.preventDefault() this.props.addItem(this.state.text); } }
Items.js
class Items extends React.Component { render() { console.log(this.props.items) // ★疑問1 Addクリック後に配列でなく数値が入ってきてしまう理由が不明 // 初期表示時 : => { id:1, "user1" }, { id:2, "user2" } // Addクリック後 : => 3 } }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/15 14:30
2018/02/15 14:33