質問編集履歴

2

書式の変更

2019/02/11 11:59

投稿

gnx_vw903
gnx_vw903

スコア74

test CHANGED
File without changes
test CHANGED
@@ -4,17 +4,17 @@
4
4
 
5
5
 
6
6
 
7
- ToDOリストにユーザー名も載せたいと考えています。
8
-
9
- 1回目はDropDownで選択したユーザーと同じユーザーToDoリストに追加するできのでが、
7
+ ToDOリストにトップで選択したユーザーからテキストの横で選択したユーザーへのToDoか情報も追加いと考えていま
8
+
10
-
9
+ 1個目のToDoは無事に表示することができましたが、
10
+
11
- 2回目に違うユーザーを選択してまたToDoを追加するとToDoにあるユーザーの情報が全て2回目に選択したユーザーの情報になってしまいます。
11
+ 2回目に違うユーザーを選択してまたToDoを追加するとToDoにあるユーザーの情報が全て2回目にその選択したユーザーの情報になってしまいます。
12
-
13
-
14
-
12
+
13
+
14
+
15
- 現状 pick={this.state.pick} 親から子に渡しているのですが、渡した情報を子にそのまま残して、
15
+ 現状 head={this.state.head}とpick={this.state.pick} 親から子に渡しているのですが、渡した情報を子にそのまま残して、
16
-
16
+
17
- 親のthis.state.pickが変わった時にはまた違う要素を渡すなどはできますでしょうか?
17
+ 親のthis.state.headとthis.state.pickが変わった時にはまた違う要素を渡すなどはできますでしょうか?
18
18
 
19
19
 
20
20
 
@@ -26,13 +26,13 @@
26
26
 
27
27
  最初にToDoに追加した時
28
28
 
29
- ![最初にToDoに追加した時](f6c435363a858682c3633c306815c897.jpeg)
29
+ ![イメージ説明](5ef99916464ccfabe2c33eb84892fb69.jpeg)
30
30
 
31
31
 
32
32
 
33
33
  2回目に追加した時
34
34
 
35
- ![イメージ説明](1219ca0b44ad8d02adf63d5b17213b1c.jpeg)
35
+ ![イメージ説明](f31ee3647e7ae861820be77629834dbb.jpeg)
36
36
 
37
37
 
38
38
 
@@ -46,176 +46,256 @@
46
46
 
47
47
  export default class CommentIndex extends Component<{}> {
48
48
 
49
- constructor(props) {
50
-
51
- super(props);
52
-
53
- this.state = {
54
-
55
- list: [],
56
-
57
- pick: ''
58
-
59
- };
60
-
61
- }
62
-
63
- _onPress = (text) => {
64
-
65
- const list = [].concat(this.state.list);
66
-
67
- list.push({
68
-
69
- key: Date.now(),
70
-
71
- text: text,
72
-
73
- done: false,
74
-
75
- });
76
-
77
- this.setState({
78
-
79
- list,
80
-
81
- });
82
-
83
- }
84
-
85
- render() {
86
-
87
- const {
88
-
89
- list,
90
-
91
- pick,
92
-
93
- } = this.state;
94
-
95
- var data = [["User1", "User2", "User3"],];
96
-
97
- return (
98
-
99
- <View style={styles.container}>
100
-
101
- <Text>ToDo</Text>
102
-
103
- <View style={styles.main}>
104
-
105
- <View style={styles.post}>
106
-
107
- <View style={styles.dropdown}>
108
-
109
- <View style={{height: 0}} />
110
-
111
- <DropdownMenu
112
-
113
- style={{flex: 1}}
114
-
115
- bgColor={'white'}
116
-
117
- tintColor={'#666666'}
118
-
119
- activityTintColor={'green'}
120
-
121
- handler={(selection,row) => this.setState({pick: data[selection][row]})}
122
-
123
- data={data}
124
-
125
- >
126
-
127
- <View style={styles.user}>
128
-
129
- { this.state.pick === 'User1' && <User1_photo /> }
130
-
131
- { this.state.pick === 'User2' && <User2_photo /> }
132
-
133
- { this.state.pick === 'User3' && <User3_photo /> }
134
-
135
- </View>
136
-
137
- </DropdownMenu>
138
-
139
- </View>
140
-
141
- <View style={styles.postinput}>
142
-
143
- <CommentInput onPress={this._onPress} />
144
-
145
- </View>
146
-
147
- </View>
148
-
149
- <View style={styles.CommentListContainer}>
150
-
151
- <FlatList
152
-
153
- style={styles.CommentList}
154
-
155
- data={list}
156
-
157
- renderItem={({ item }) => <CommentItem {...item} pick={this.state.pick} />}
158
-
159
- />
160
-
161
- </View>
162
-
163
- </View>
164
-
165
- </View>
166
-
167
- );
168
-
169
- }
49
+
50
+
51
+ constructor(props) {
52
+
53
+ super(props);
54
+
55
+
56
+
57
+ this.state = {
58
+
59
+ head: [],
60
+
61
+ list: [],
62
+
63
+ pick: [],
64
+
65
+ };
66
+
67
+ }
68
+
69
+
70
+
71
+ _onPress = (text) => {
72
+
73
+ const list = [].concat(this.state.list);
74
+
75
+
76
+
77
+ list.push({
78
+
79
+ key: Date.now(),
80
+
81
+ text: text,
82
+
83
+ done: false,
84
+
85
+ });
86
+
87
+
88
+
89
+ this.setState({
90
+
91
+ list,
92
+
93
+ });
94
+
95
+ }
96
+
97
+
98
+
99
+ render() {
100
+
101
+ const {
102
+
103
+ head,
104
+
105
+ list,
106
+
107
+ pick,
108
+
109
+ } = this.state;
110
+
111
+
112
+
113
+ var data = [["User1", "User2", "User3"],];
114
+
115
+
116
+
117
+ return (
118
+
119
+ <View style={styles.container}>
120
+
121
+ <View style={styles.dropdownHeader}>
122
+
123
+ <View style={styles.dropdown}>
124
+
125
+ <DropdownMenu
126
+
127
+ style={{flex: 1}}
128
+
129
+ bgColor={'white'}
130
+
131
+ tintColor={'#666666'}
132
+
133
+ activityTintColor={'green'}
134
+
135
+ handler={(selection, row) => this.setState({head: data[selection][row]})}
136
+
137
+ data={data}
138
+
139
+ >
140
+
141
+ <View style={styles.userHeader}>
142
+
143
+ { this.state.head === 'User1' && <User1 /> }
144
+
145
+ { this.state.head === 'User2' && <User2 /> }
146
+
147
+ { this.state.head === 'User3' && <User3 /> }
148
+
149
+ </View>
150
+
151
+ </DropdownMenu>
152
+
153
+ </View>
154
+
155
+ </View>
156
+
157
+ <Text>To Do</Text>
158
+
159
+ <View style={styles.main}>
160
+
161
+ <View style={styles.post}>
162
+
163
+ <View style={styles.dropdown}>
164
+
165
+ <View style={{height: 0}} />
166
+
167
+ <DropdownMenu
168
+
169
+ bgColor={'white'}
170
+
171
+ tintColor={'#666666'}
172
+
173
+ activityTintColor={'green'}
174
+
175
+ handler={(selection,row) => this.setState({pick: data[selection][row]})}
176
+
177
+ data={data}
178
+
179
+ >
180
+
181
+ <View style={styles.user}>
182
+
183
+ { this.state.pick === 'User1' && <User1_photo /> }
184
+
185
+ { this.state.pick === 'User2' && <User2_photo /> }
186
+
187
+ { this.state.pick === 'User3' && <User3_photo /> }
188
+
189
+ </View>
190
+
191
+ </DropdownMenu>
192
+
193
+ </View>
194
+
195
+ <View style={styles.postinput}>
196
+
197
+ <CommentInput onPress={this._onPress} />
198
+
199
+ </View>
200
+
201
+ </View>
202
+
203
+ <View style={styles.CommentListContainer}>
204
+
205
+ <FlatList
206
+
207
+ style={styles.CommentList}
208
+
209
+ data={list}
210
+
211
+ renderItem={({ item }) => <CommentItem {...item} head={this.state.head} pick={this.state.pick}/>}
212
+
213
+ />
214
+
215
+ </View>
216
+
217
+ </View>
218
+
219
+ </View>
220
+
221
+ );
222
+
223
+ }
170
224
 
171
225
  }
172
226
 
227
+
228
+
173
229
  ```
174
230
 
175
231
  CommentItem.js
176
232
 
177
233
  ```js
178
234
 
235
+ export default class CommentInput extends Component {
236
+
237
+ constructor(props) {
238
+
239
+ super(props);
240
+
241
+
242
+
243
+ this.ref = {};
244
+
245
+ }
246
+
247
+
248
+
179
- const CommentItem = (props) => {
249
+ _onPress = () => {
250
+
180
-
251
+ this.props.onPress(this.ref._lastNativeText);
252
+
253
+ this.ref.setNativeProps({ text: '' });
254
+
255
+ }
256
+
257
+
258
+
259
+ render() {
260
+
181
- const {
261
+ const {
182
-
262
+
183
- text,
263
+ onPress,
184
-
185
- pick,
264
+
186
-
187
- } = props;
265
+ } = this.props;
188
-
189
-
190
-
191
-
192
-
266
+
267
+
268
+
193
- return (
269
+ return (
194
-
270
+
195
- <View style={styles.container}>
271
+ <View style={styles.container}>
196
-
272
+
197
- { pick === 'User1' && <User1_photo /> }
273
+ <TextInput
198
-
199
- { pick === 'User2' && <User2_photo /> }
274
+
200
-
201
- { pick === 'User3' && <User3_photo /> }
202
-
203
- <View style={styles.left}>
275
+ style={styles.textInput}
276
+
204
-
277
+ ref={(ref) => { this.ref = ref; }}
278
+
279
+ />
280
+
281
+ <TouchableOpacity
282
+
283
+ style={styles.button}
284
+
285
+ onPress={this._onPress}
286
+
287
+ >
288
+
205
- <Text style={styles.text} >{text}</Text>
289
+ <Text style={styles.buttonText}>追加</Text>
290
+
206
-
291
+ </TouchableOpacity>
292
+
207
- </View>
293
+ </View>
208
-
209
- <ApplauseButton />
294
+
210
-
211
- </View>
212
-
213
- );
295
+ );
296
+
297
+ }
214
298
 
215
299
  }
216
300
 
217
-
218
-
219
- export default CommentItem;
220
-
221
301
  ```

1

質問の変更

2019/02/11 11:59

投稿

gnx_vw903
gnx_vw903

スコア74

test CHANGED
File without changes
test CHANGED
@@ -4,15 +4,11 @@
4
4
 
5
5
 
6
6
 
7
- Textに関してはボタンを押すとタイプした文字がリスト化され表示されるようになりした
7
+ ToDOリストにユーザー名も載せたいと考え
8
-
9
-
10
-
11
- 追加の機能として、
8
+
12
-
13
- DropDownでユーザーを選択してToDoリストに追加する、選択したユーザーの情報もToDoリストに乗せことができたのですが、
9
+ 1回目はDropDownで選択したユーザーと同じユーザーToDoリストに追加するできたのですが、
14
-
10
+
15
- に違うユーザーを選択してまたToDoを追加するとToDoにあるユーザーの情報が全てその選択したユーザーの情報になってしまいます。
11
+ 2回目に違うユーザーを選択してまたToDoを追加するとToDoにあるユーザーの情報が全て2回目に選択したユーザーの情報になってしまいます。
16
12
 
17
13
 
18
14