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
}
}
repeat()https://stackoverflow.com/questions/202605/repeat-string-javascript/41574167#41574167
/**
* str: String
* count: Number
*/
const str = `hello repeat!\n`, count = 3;
let resultString = str.repeat(count);
console.log(`resultString = \n${resultString}`);
/*
resultString =
hello repeat!
hello repeat!
hello repeat!
*/
({ toString: () => 'abc', repeat: String.prototype.repeat }).repeat(2);
// 'abcabc' (repeat() is a generic method)
// Examples
'abc'.repeat(0); // ''
'abc'.repeat(1); // 'abc'
'abc'.repeat(2); // 'abcabc'
'abc'.repeat(3.5); // 'abcabcabc' (count will be converted to integer)
// 'abc'.repeat(1/0); // RangeError
// 'abc'.repeat(-1); // RangeError
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat
/**
* str: String
* count: Number
*/
let resultString = str.repeat(count);
https://stackoverflow.com/questions/36316846/react-onclick-and-preventdefault-link-refresh-redirect
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
state = {
cards: []
};
Stateless function components & no refs
https://gist.github.com/xgqfrms-GitHub/cc2598e0410542c504aa7fee4e2c8b9f#gistcomment-2136883