Реквизиты - это данные, которые передаются от родителя его дочерним элементам и доступны через this.props
в дочернем компоненте.
Вы сохраняете все необходимые данные, передаваемые дочернему компоненту, либо в состоянии родительского компонента, либо в состоянии избыточности / потока (если у вас есть глобальное управление состоянием).
При изменении failed
изменение состояния должно инициироваться на родительском компоненте, что, в свою очередь, вызывает повторную визуализацию внутри дочернего компонента.
Например:
Далее мы передаем failed
в качестве реквизита, а функцию onFailureUpdate
- в качестве триггера обратного вызова для дочернего компонента от родителя.
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
failed: false
}
}
onFailureUpdate = (value) => {
this.setState({
failed: value
});
}
render() {
return (<ChildComponent failed={this.state.failed} onFailureUpdate={this.onFailureUpdate} />)
}
}
В дочернем компоненте, на размытии, мы используем функцию, которую мы передали как prop, чтобы изменить состояние в parent, что, в свою очередь, будет повторно отображать дочерний компонент.
class ChildComponent extends React.Component {
onBlur = (e) => {
this.props.onFailureUpdate(e.target.value);
}
render() {
return (
<input
value={this.props.failed}
onBlur={(e) => this.onBlur(e)}
/>
)
}
}
Другой способ:
Или, если нет необходимости в реквизитах или родительско-дочерних отношениях, вы можете исключить необходимость в родительском контейнере и перейти к ведению состояния в дочернем элементе. .
class RewrittenChildComponentWithState extends React.Component {
constructor() {
this.state = {
failed: false
};
}
onBlur = (e) => {
this.setState({
failed: e.target.value
});
}
render() {
return (
<input
value={this.state.failed}
onBlur={(e) => this.onBlur(e)}
/>
)
}
}
Надеюсь, это решит вашу путаницу.
Предположим, вам нужны строчные буквы:
var chr = String.fromCharCode(97 + n); // where n is 0, 1, 2 ...
97 - это код ASCII для строчной буквы «a». Если вам нужны заглавные буквы, замените 97 на 65 (заглавная буква «A»). Обратите внимание, что если n> 25
, вы выйдете за пределы диапазона букв.
Попробуйте
(n+10).toString(36)
chr = n=>(n+10).toString(36);
for(i=0; i<26; i++) console.log(`${i} => ${ chr(i) }`);
Будет более портативным в случае расширения на другие алфавиты:
char='abcdefghijklmnopqrstuvwxyz'[code]
или, чтобы быть более совместимым (с нашим любимым IE):
char='abcdefghijklmnopqrstuvwxyz'.charAt(code);
Итак: (a-zA-Z)
function codeToChar( number ) {
if ( number >= 0 && number <= 25 ) // a-z
number = number + 97;
else if ( number >= 26 && number <= 51 ) // A-Z
number = number + (65-26);
else
return false; // range error
return String.fromCharCode( number );
}
input: 0-51, или он вернет false (ошибка диапазона);
ИЛИ:
var codeToChar = function() {
var abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
return function( code ) {
return abc[code];
};
})();
вернет undefined в случае ошибки диапазона. ПРИМЕЧАНИЕ: массив будет создан только один раз и из-за закрытия он будет доступен для новой функции codeToChar. Я думаю, это даже быстрее, чем первый метод (в основном это просто поиск).
Используйте String.fromCharCode
. Это возвращает строку из значения Unicode, которая соответствует первым 128 символам ASCII.
var a = String.fromCharCode(97);
Javascript String.fromCharCode (code1, code2, ..., codeN) принимает бесконечное количество аргументов и возвращает строку букв, соответствующие значения ASCII которых - code1, code2, ... codeN . Поскольку 97 - это «a» в ASCII, мы можем скорректировать вашу индексацию, добавив 97 в ваш индекс.
function indexToChar(i) {
return String.fromCharCode(i+97); //97 in ASCII is 'a', so i=0 returns 'a',
// i=1 returns 'b', etc
}