[ReactJS] Ajouter une recherche utilisateur
salut,
je débute avec reactjs, j'ai quelques heures de developpement seulement.
Actuellement, lorsque ma page s'affiche, une requête est fait en ajax pour aller chercher des données et le résultat est affiché.
Au lieu de ça, je cherche à ajouté un search input et ensuite de lancé la recherche et d'afficher les résultats.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
| var WebSite = React.createClass({
getInitialState: function() {
return {display: true };
},
render: function() {
if (this.state.display==false) return null;
else return (
<tr>
<td>{this.props.website.webSite}</td>
<td>{this.props.website.date}</td>
<td>{this.props.website.visits}</td>
</tr>
);
}
});
var WebSiteTable = React.createClass({
render: function() {
var rows = [];
this.props.websites.forEach(function(website) {
rows.push(
<WebSite website={website} key={website.website} />);
});
return (
<table className="table table-striped">
<thead>
<tr>
<th>Website</th>
<th>Date</th>
<th>Visits</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
});
var App = React.createClass({
searchWebSiteFromDate: function() {
var self = this;
$.ajax({ var WebSite = React.createClass({
getInitialState: function() {
return {display: true };
},
render: function() {
if (this.state.display==false) return null;
else return (
<tr>
<td>{this.props.website.webSite}</td>
<td>{this.props.website.date}</td>
<td>{this.props.website.visits}</td>
</tr>
);
}
});
var WebSiteTable = React.createClass({
render: function() {
var rows = [];
this.props.websites.forEach(function(website) {
rows.push(
<WebSite website={website} key={website.website} />);
});
return (
<table className="table table-striped">
<thead>
<tr>
<th>Website</th>
<th>Date</th>
<th>Visits</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
});
var App = React.createClass({
searchWebSiteFromDate: function() {
var self = this;
$.ajax({
url: "http://localhost:8080/rest/report/statwebsiteg",
}).then(function(data) {
self.setState({ websites: data});
});
},
getInitialState: function() {
return { websites: [] };
},
componentDidMount: function() {
this.searchWebSiteFromDate();
},
render() {
return ( <WebSiteTable websites={this.state.websites} /> );
}
});
ReactDOM.render(<App />, document.getElementById('root') );
url: "http://localhost:8080/rest/report/statwebsiteg",
}).then(function(data) {
self.setState({ websites: data});
});
},
getInitialState: function() {
return { websites: [] };
},
componentDidMount: function() {
this.searchWebSiteFromDate();
},
render() {
return ( <WebSiteTable websites={this.state.websites} /> );
}
});
ReactDOM.render(<App />, document.getElementById('root') ); |
j'ai tenté de mofié ce qui est dans App par
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
var App = React.createClass({
getInitialState: function () {
return {websites: []};
},
onBlur: function () {
var self = this;
$.ajax({
url: "http://localhost:8080/rest/report/statwebsiteg",
}).then(function (data) {
self.setState({websites: data});
});
},
render: function () {
return <input type="text" onBlur={ this.onBlur } placeholder="Enter your date here."/>;
}
});
ReactDOM.render(<App />, document.getElementById('root')); |
il y a rien qui est affiché du résultat de la recherche...
