https://medium.com/@ericclemmons/react-event-preventdefault-78c28c950e46
https://facebook.github.io/react/docs/events.html
event.preventDefault();
// Let's stop this event.
event.stopPropagation();
// Really this time.
handleKeyDown(event) {
if (event.keyCode === 13) {
event.preventDefault(); // Let's stop this event.
event.stopPropagation(); // Really this time.
alert("Is it stopped?");
// "Hahaha, I'm gonna submit anyway!" - Chrome
}
}
ref={(input) => {return this.userNameInput = input;}}
this.userNameInput.value
https://api.github.com/users/xgqfrms
{
"login": "xgqfrms",
"id": 7291672,
"avatar_url": "https://avatars1.githubusercontent.com/u/7291672?v=3",
"gravatar_id": "",
"url": "https://api.github.com/users/xgqfrms",
"html_url": "https://github.com/xgqfrms",
"followers_url": "https://api.github.com/users/xgqfrms/followers",
"following_url": "https://api.github.com/users/xgqfrms/following{/other_user}",
"gists_url": "https://api.github.com/users/xgqfrms/gists{/gist_id}",
"starred_url": "https://api.github.com/users/xgqfrms/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/xgqfrms/subscriptions",
"organizations_url": "https://api.github.com/users/xgqfrms/orgs",
"repos_url": "https://api.github.com/users/xgqfrms/repos",
"events_url": "https://api.github.com/users/xgqfrms/events{/privacy}",
"received_events_url": "https://api.github.com/users/xgqfrms/received_events",
"type": "User",
"site_admin": false,
"name": "xgqfrms",
"company": "xray",
"blog": "https://www.xgqfrms.xyz",
"location": "shanghai",
"email": null,
"hireable": true,
"bio": "Hello World!",
"public_repos": 202,
"public_gists": 3,
"followers": 28,
"following": 1,
"created_at": "2014-04-14T15:12:30Z",
"updated_at": "2017-06-10T09:04:07Z"
}
No
CSP/CORS
https://cdn.xgqfrms.xyz/index.html
fetch(`https://api.github.com/users/xgqfrms`)
.then(
(response) => {
console.log(`response`, response);
let json = response.json();
console.log(`json`, json);
return json;
}
)
.then(
(data) => {
console.log(`data`, data);
}
);Getting Started With Axios (Accessing REST Web Services HTTP APIs in JavaScript) [Full HD,1920x1080].mp4
axios.get(`https://api.github.com/users/xgqfrms`)
.then(
res => {
console.log(`response`, res);
// no need response.json();
return res;
}
)
.then(
(data) => {
console.log(`data`, data);
}
);
axios.get(url)
.then(
res => {
console.log(`response =`, res);
// no need response.json();
this.props.onSubmit(res.data);
console.log(`response.data = `, res.data);
return res.data;
}
);
将父组件的方法作为 props 传递给子组件使用，
子组件在自己的方法中调用 props 接收到的方法，并为其传递参数，从而执行父组件的方法，修改父组件的 state 值！
子组件不可以直接修改 父组件的 state ！
concat
High-level advice and guidelines for writing sane, manageable, scalable CSS
https://react2.webgeeker.xyz/acknowledgements.html
https://github.com/xgqfrms/Angular2/blob/gh-pages/C9.IO/c9.io-Angular2-App.zip
https://github.com/xgqfrms/Angular2/tree/gh-pages/Angular-2-App
https://github.com/xgqfrms/Angular2/tree/gh-pages/Angular2-App-demo
https://github.com/xgqfrms/Angular2/tree/gh-pages/AngularJS-2-App
state = {
cards: []
};
prevent-react-component-click-event-bubble-to-document
https://stackoverflow.com/questions/44711549/how-to-prevent-react-component-click-event-bubble-to-document/44807016#44807016
https://stackoverflow.com/questions/36316846/react-onclick-and-preventdefault-link-refresh-redirect
https://stackoverflow.com/questions/38619981/react-prevent-event-bubbling-in-nested-components-on-click