Как правильно делать классы с поддержкой интерфейсов без ошибок?

Сам код класса с ошибками на TS:

import { StyleSheet, TextStyle, ViewStyle } from 'react-native';
import { IHandlerControl } from "../../ControlInterface";

export class StoresFeed{
    storesFeed: any;
    constructor(event: any,type: any){
        this.storesFeed = IHandlerControl = {
            screenEvent: event,
            eventType: type
        }
    }

    __handlerFeed(event : IHandlerControl){
        if(event.screenEvent === 'ui-change'){
            type Style = {
                feedTitle: TextStyle,
                listTitle: TextStyle,
                feedCont: [
                    title: TextStyle,
                    description: TextStyle,
                    price: TextStyle,
                    link: TextStyle
                ],
                listCont: [
                    list: ViewStyle,
                    point: TextStyle
                ]
            };
            if(event.eventType == 0){ 
                //Нулевое значение - это то, чего касается первоначальных элементов и компонентов
                return StyleSheet.create<Style>({
                    feedTitle: {
                        color: '#ff0033',
                        fontSize: '140%',
                        fontWeight: 'bold',
                        marginLeft: '2%',
                        paddingTop: '1%',
                        paddingBottom: '1%'
                    },
                    listTitle: {
                        color: '#d83b01',
                        fontSize: '120%',
                        fontWeight: 'bold',
                        marginLeft: '2%',
                        paddingTop: '1%',
                        paddingBottom: '1%'
                    },
                    feedCont: [
                        title:{
                            fontSize: '130%',
                            fontWeight: 'italic'
                        },
                        description:{
                            fontSize: '100%'
                        },
                        price:{
                            fontSize: '110%',
                            fontWeight: 'bold'
                        }
                        link:{
                            fontSize: '90%',
                            fontWeight: 'normal'
                        }
                    ],
                    listCont: [
                        list:{
                            fontSize: '100%'
                        },
                        print:{
                            color: '#201f1e',
                            fontWeight: 'italic'
                        }
                    ]
                });
            }
           
        }
    }

    eventStart(){
        this.__handlerFeed(this.storesFeed);
    }
}

Почему не на всех областях просмотра при клике на кнопку справа от поля ввода не отключается disabled в самом поле?

WapSter , я благодарен тебе за вариант ответа, с помощью которого я почти полностью решил проблему, переделывая форму, но заигралась та же песня

Почему не на всех областях просмотра при клике на кнопку справа от поля ввода не отключается disabled в самом поле?

WapSter , и без всякого JQuery воспользовался твоим вариантом:

const inputs = document.querySelector('.profile-settings');
inputs.addEventListener('click', e => {
  const target = e.target;
  if(target.tagName === 'DIV') {
    const input = target.previousElementSibling;
    input.disabled = !input.disabled;
    target.textContent = input.disabled ? '<i class=\'far fa-edit\'></i>' : '<i class=\'far fa-save inputing\'></i>';
  }
});

И тоже не помогло;-(

Почему не на всех областях просмотра при клике на кнопку справа от поля ввода не отключается disabled в самом поле?

WapSter , мне твой вариант не помог...
Сама разметка:

<div class="passport-page">
                <header>
                    <div id="left-content">
                        <span>Passport</span>
                    </div>
                    <div id="right-content">
                        <a href="../index.html">Exit</a>
                        <nav>
                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAAy0lEQVRIieWUMQ7CMBAE9xAleQL/oIegwKsoeSYJvADRD00QJjjxOQpCgu1srW/svZOlnxFQAWec8ta1ANBIWroPmlna9fqCrJt5NZu6oBsA7IGLsyWHJKkbUU7DXZAIINmTCOT4acAbJBxTpOf4ddd9gNh+eGY+dMOhIl59b0wnB1irhL+WtJG0kFRKakaTeyZk3fGUMVPoyZ2QwsxugaeQdO2awiRye7BKrP3qiejUxrIAtkCdimgIkPsXPeRrPLAbAWmAanRs/6k7RAnoeBvtDckAAAAASUVORK5CYII=" id="save" alt="Save the changes">
                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAAn0lEQVRIid2Uuw0CMRBER4jsWqAFCoEqLnJdJ5oix9RA+ohOOp0W2PUnMBNZq5kd78eW/g7AFcjEkYGLx6Ak+YqHxwCAgspN3SGaKIqhDBYXKzoDYLbOLQ0AbsAUEUQNAO7AucrA8Q5eQNpqum/Rx1tG+U1a9IXfdch913SjW1y6CgNTN9RfZOJoxJ6STiVtkpT3AauCZBGdydNP1nB4A5tWVezafhVfAAAAAElFTkSuQmCC" id="exit" alt="Exit">
                        </nav>
                    </div>
                </header>
                <main>
                    <div id="left-content">
                            <form action="" method="post" class="profile-settings">
                                <div class="editor">
                                    <label for="login">Login</label>
                                    <input type="text" name="login" value="Jack D" disabled="true">
                                    <div id="control"><i class="far fa-edit" aria-hidden="true"></i></div>
                                </div>
                                <div class="editor">
                                    <label for="mail">E-Mail</label>
                                    <input type="email" name="mail" value="[e-mail]" disabled="true">
                                    <div id="control"><i class="far fa-edit" aria-hidden="true"></i></div>
                                </div>
                                <div class="editor">
                                    <label for="pass">Password</label>
                                    <input type="password" name="pass" value="123456" disabled="true">
                                    <div id="control"><i class="far fa-edit" aria-hidden="true"></i></div>
                                </div>
                                <div class="editor">
                                    <label for="fname">First name</label>
                                    <input type="text" name="fname" value="Daniels" disabled="true">
                                    <div id="control"><i class="far fa-edit" aria-hidden="true"></i></div>
                                </div>
                                <div class="editor">
                                    <label for="sname">Second name</label>
                                    <input type="text" name="sname" value="" disabled="true">
                                    <div id="control"><i class="far fa-edit" aria-hidden="true"></i></div>
                                </div>
                                <div class="editor">
                                    <label for="login">Fone</label>
                                    <input type="text" name="fone" value="" disabled="true">
                                    <div id="control"><i class="far fa-edit" aria-hidden="true"></i></div>
                                </div>
                                
                            </form>
                    </div>
                    <div id="right-content">
                       <ul class="nav">
                           <li class="active"><i class="fas fa-circle" aria-hidden="true"></i><a href="">Passport</a></li>
                           <li><i class="fas fa-circle" aria-hidden="true"></i><a href="">My investment requests</a></li>
                           <li><i class="fas fa-circle" aria-hidden="true"></i><a href="">My offers for investors</a></li>
                           <li><i class="fas fa-circle" aria-hidden="true"></i><a href="">My services for investors</a></li>
                           <li><i class="fas fa-circle" aria-hidden="true"></i><a href="">My shopping Cart</a></li>
                       </ul>
                    </div>
                </main>
                <footer>
                    <div id="left-content">
                        <button class="add-but">Save the changes</button>
                    </div>
                </footer>
            </div>

Сами стили:

@import url('../passport.css');
#passport {
    height: 410px;
}
.passport-page {
    height: calc(284px * 2);
}
.passport-page > main #left-content .profile-settings{
    width: 50%;
}
.passport-page > main #left-content .profile-settings .editor{
    display: block;
    margin-top: 2%;
}
.passport-page > main #left-content .profile-settings .editor label{
    display: block;
    margin-top: 8px;
    font-size: 80%;
    margin-left: 2%;
    color: gray;
}
.passport-page > main #left-content .profile-settings .editor input{
    background-color: white;
    font-size: 90%;
    color:black;
    border: solid 2px darkgray;
    padding: 5px;
    font-weight: bold;
    text-indent: 2%;
    margin-top: 12px;
    width: 86%;
    border-radius: 4px;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-left: 2%;
}
.passport-page > main #left-content .profile-settings .editor #control{
    font-size: 100%;
    display: inline-table;
    margin-top: 15px;
    color: gray;
    margin-left: 2%;
}
.passport-page > main #left-content .profile-settings .editor #control:hover{
    cursor: pointer;
}
.passport-page > main #left-content .profile-settings .editor #control i.inputing{
    color: #0079bf;
}
.passport-page > main #left-content .profile-settings .editor input:focus{
    border-color:#0079bf;
}
.passport-page > main #left-content .profile-settings .editor input:disabled{
    font-weight: normal;
    color: gray;
}
.passport-page > footer{
    position: relative;
    top: -32%;
}
.passport-page > footer #left-content{
    width: 100%;
    top: 60px;
    position: relative;
}

@media all and (max-width: 414px){
    #passport {
        height: 590px;
    }    
}
@media all and (max-width: 600px){
    #passport {
        height: 590px;
    }    
}
@media all and (max-width: 768px){
    #passport {
        height: 590px;
    }    
    .passport-page {
        height: calc(313px * 2);
    }
}
@media all and (max-width: 800px){
    #passport {
        height: 590px;
    }  
    .passport-page {
        height: calc(313px * 2);
    }  
}
@media all and (max-width: 960px){
    #passport {
        height: 590px;
    }  
    .passport-page > main #left-content .profile-settings .editor input{
        width: 80%;
    }
    .passport-page > main #left-content .profile-settings {
        width: 98%;
    }
    .passport-page {
        height: calc(313px * 2);
    }
}
@media all and (max-width: 1024px){
    #passport {
        height: 590px;
    }
    .passport-page {
        height: calc(313px * 2);
    }
}
@media all and (max-width: 1280px){
    #passport {
        height: 680px;
    }

}

И сама логика на JQuery, написанная на основе твоего варианта:

$(document).ready(function () {
    $('.passport-page > main #left-content .profile-settings .editor').click(function (e,t) { 
        const target = $(this);

        if (target.prop("tagName") === 'div' && target.attr('id') === 'control') {
            const input = target.prevAll('input').first();
            input.attr('disabled', !input.attr('disabled'));
            
            if(input.attr('disabled')){
                target.html("<i class='far fa-save inputing'></i>");
            }
            else{
                target.html("<i class='far fa-edit'></i>");
            }
        } 
    });
});

Как убрать "Invalid hook call"?

davidnum95, недавно пришла мне идея в голову о том, что могу применить промисы внутри классовых компонентов, избавляясь от хуков и промисы решат такого рода проблемы. Основы промисов и асинхронности знаю, но на практике с этим я не игрался. А как превратить проблемные хуки в полне работающие промисы?

Как убрать "Invalid hook call"?

1. Код первого компонента:
   
   

   import React, {Component, useState, useEffect} from 'react';
   import { Button, View, Text, SafeAreaView, FlatList, StyleSheet, StatusBar } from 'react-native';
   import _ from "lodash";
   import {Categories} from "../data/Categories";
   import {Cards} from "../data/Cards";
   import {CategoryItem} from "../components/CategoryItem";
   import {CardItem} from "../components/CardItem";
   import { Audio } from 'expo-av';
   
   const styles = StyleSheet.create({
       container: {
           flex: 1,
       },
       item: {
           backgroundColor: '#c2e3ff',
           padding: 20,
           height: 10,
           marginVertical: 8,
           marginHorizontal: 16,
       },
       title: {
           fontSize: 12,
       },
   })
   
   export class HomeScreen extends Component {
   
       constructor(props) {
           super(props);
           this.state = {catSelect: 1, shelf:[]};
       }
   
       onCatPress = (item) => {
           console.log('onCatPress');
           this.setState({ catSelect: item.key });
           console.log(this.state);
       };
   
       onCardPress = (item) => {
           console.log('onCardPress');
           let music;
           let shelf = this.state.shelf;
           
           shelf.push(item);
           this.setState({ shelf: shelf });
           console.log(this.state.shelf);
   
           if(item.sound != null) music = item.sound;
           else music = '../assets/sounds/nosound.wav';
           const [ setSound ] = useState();
           useEffect(() => {
               (async () => {
                 const snd = Audio.fromModule(music);
                 await snd.downloadAsync();
                 const notify = await Audio.Sound.createAsync(snd.localUri || snd.uri);
                 setSound(notify);
                 await notify.asyncPlay();
               })();
           }, []);
       };
   
       renderCat = ({item}) => {
           return (
               <CategoryItem
                   category={item}
                   onPress={this.onCatPress.bind(this, item)}
               />
           );
       };
   
       renderCard = ({item}) => {
           return (
               <CardItem
                   card={item}
                   onPress={this.onCardPress.bind(this, item)}
               />
           );
       };
   
       render = () => {
           var sortedCat = _.filter(Cards, {'categorie': this.state.catSelect})
       return (
   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
   
       <Text>Главный экран</Text>
   
       <View style={styles.container}>
           <FlatList
               data={this.state.shelf}
               renderItem={this.renderCard}
               keyExtractor={item => item.id.toString()}
               onPress={this.onCatPress.bind(this)}
               horizontal={true}
           />
       </View>
   
       <View style={styles.container}>
           <FlatList
               data={sortedCat}
               renderItem={this.renderCard}
               keyExtractor={item => item.id.toString()}
               onPress={this.onCatPress.bind(this)}
               horizontal={true}
           />
       </View>
   
       <View style={styles.container}>
           <FlatList
               data={Categories}
               renderItem={this.renderCat}
               keyExtractor={item => item.key.toString()}
               onPress={this.onCatPress.bind(this)}
   
               horizontal={true}
           />
       </View>
   
       <Button
           title="Категории карточек"
           onPress={() => this.props.navigation.push('Categories')} />
   </View>
       )
       }
   }

   
   
   
2. Код второго компонента:
   
   

   import React, {Component, useState, useEffect} from 'react';
   import {StyleSheet, TouchableOpacity, Image, Text, View} from 'react-native';
   import { Asset } from 'expo-asset';
   
   export class CategoryItem extends Component {
   
   
       render = () => {
   
           const styles = StyleSheet.create({
               container: {
                   flex: 1,
               },
               item: {
                   backgroundColor: '#c2e3ff',
                   padding: 10,
                   height: 5,
                   marginVertical: 4,
                   marginHorizontal: 6,
               },
               title: {
                   fontSize: 6,
               },
               thumbnail: {
                   width: 50,
                   height: 50,
               }
           })
   
   
   
           const {onPress, category} = this.props;
           let img;
   
   
           if(category.image != null) img = category.image;
           else img = '../assets/images/noimage.png';
   
           const [ setReady ] = useState();
           const [image, setImage] = useState([]);
           useEffect(() => {
               (async () => {
                 const image = Asset.fromModule(img);
                 await image.downloadAsync();
                 setImage(image);
                 setReady(true);
               })();
           }, []);
   
           return (
               <TouchableOpacity onPress={onPress}>
               <View style={styles.item}>
                   <Text>{category.title}</Text>
                   <Image style={styles.thumbnail} source={{ uri: image.localUri || image.uri }} />
               </View>
               </TouchableOpacity>
           );
       };
   }

   
   
   
3. Код домашнего экрана приложения:
   
   

   import React, {Component, useState, useEffect} from 'react';
   import {StyleSheet, TouchableOpacity, Image, Text, View} from 'react-native';
   import { Asset } from 'expo-asset';
   export class CardItem extends Component {
   
       render = () => {
           const {onPress, card} = this.props;
           let img;
   
           const styles = StyleSheet.create({
               container: {
                   flex: 1,
               },
               item: {
                   backgroundColor: '#c2e3ff',
                   padding: 20,
                   height: 10,
                   marginVertical: 8,
                   marginHorizontal: 16,
               },
               title: {
                   fontSize: 12,
               },
               thumbnail: {
                   width: 100,
                   height: 100,
               }
           })
   
           if(card.image != null) img = card.image;
           else img = '../assets/images/noimage.png';
           
           const [ setReady ] = useState();
           const [image, setImage] = useState([]);
           useEffect(() => {
               (async () => {
                 const image = Asset.fromModule(img);
                 await image.downloadAsync();
                 setImage(image);
                 setReady(true);
               })();
           }, []);
   
           return (
               <TouchableOpacity onPress={onPress}>
               <View style={styles.item}>
                   <Text>{card.title}</Text>
                   <Image style={styles.thumbnail} source={{ uri: image.localUri || image.uri }} />
               </View>
               </TouchableOpacity>
           );
       };
   }

   
   
   

Как исправить ошибку в конструкторе класса-наследника Component?

Второй источник проблемы:

export class ListFeed extends Component {
    constructor(props){
        let service = props.svc,
            filter = props.flt,
            result = null,
            response = null;

        switch (service) {
            case "cards":
                if(filter != null){
                    let pms = [
                        filter == "start" ? true : false,
                        filter == "last" ? true : false,
                        filter == "best" ? true : false
                    ];

                    if (pms[2]) result = listData[0];
                    if (pms[0]) result = listData[2];
                    if (pms[1]) result = listData[1];


                    response = ({ image, title }) => {
                        <Container col style={dataGrid[0].card}>
                            <Image style={dataGrid[1].card} source={{uri: image}} />
                            <Text h3 style={dataGrid[2].card}>{title}</Text>
                        </Container>
                    }
                    

                }
                else{
                    let count = 2;
                    for (let index = 0; index < count; index++) {
                        result += listData[index];
                        response += ({ title }) => {
                            <Container col style={dataGrid[0].card}>
                                <Text h3 style={dataGrid[1].card}>{title}</Text>
                            </Container>
                        }
                    }
                }
            break;
        
        }

        this.result = result;
        this.response = response;
    }
    render = () => {
        return (
            <FlatList data={this.result} renderItem={this.response} />
        )
    }
}

Как исправить ошибку в конструкторе класса-наследника Component?

Первый источник проблемы:

export class FeedData extends Component {
    constructor(props){
        let service = props.svc,
            filter = props.flt,
            result = null,
            response = null;

        switch (service) {
            case "cards":
                if(filter != null){
                    let pms = [
                        filter == "start" ? true : false,
                        filter == "last" ? true : false,
                        filter == "best" ? true : false
                    ];

                    if (pms[2]) result = cardsData[0];
                    if (pms[0]) result = cardsData[2];
                    if (pms[1]) result = cardsData[1];


                    response = ({ image, title }) => {
                        <Container col style={dataGrid[0].card}>
                            <Image style={dataGrid[1].card} source={{uri: image}} />
                            <Text h3 style={dataGrid[2].card}>{title}</Text>
                        </Container>
                    }
                    

                }
                else{
                    result = cardsData[0];
                    response = ({ image, title }) => {
                        <Container col style={dataGrid[0].card}>
                            <Image style={dataGrid[1].card} source={{uri: image}} />
                            <Text h3 style={dataGrid[2].card}>{title}</Text>
                        </Container>
                    }
                }
            break;
        
        }

        this.result = result;
        this.response = response;
        
    }
    render = () => {
        return (
            <FlatList data={this.result} renderItem={this.response} />
        )
    }
}

Как исправить ошибку 404 при правильной отправке POST-запроса веб-сервису?

Rsa97, у меня сам алгоритм работает на PHP 7.4
Но пробовал реализовать эти варианты, доступное в PHP 7:
if($_POST['phone']) { и if($_REQUEST['phone']) {
Но ни один из вариантов хороших новостей не принёс с теми же песнями об ошибке 404...

Как исправить ошибку 404 при правильной отправке POST-запроса веб-сервису?

FanatPHP, нет. Был без ошибок и предупреждений написан, но тест вышел неудачно

Как исправить ошибку 404 при правильной отправке POST-запроса веб-сервису?

Результат выполнения var_dump($_POST) после отправки POST-запроса:

array(0) {}

Rsa97, в чём заключается проблема?

Тестируя веб-сервис на PHP, почему он выдаёт ошибку 403, когда права к файлам и директориям были настроены правильно?

monday_suicide, но логи на хостинге были отключены, но сегодня разобрался с их активацией

Почему не запускается эмулятор Expo?

Vladimir , попробовал воспользоваться вашим советом и опять с этим не вышло

Почему не запускается эмулятор Expo?

CLI был установлен и обновлён до последней версии

Как правильно реализовывать элемент ввода диапазона с двумя слайдерами?

Pashok Doom, скрипт у меня построен так:

const RangeInput = () => {
    var rangetext = [
        $('.objects-adding-search > footer #left-content .input-from-to:nth-child(1) .content-form input#from'),
        $('.objects-adding-search > footer #left-content .input-from-to:nth-child(1) .content-form input#to')
    ];
    var rangeeventext = [
        $('.objects-adding-search > footer #left-content .input-from-to:nth-child(2) .content-form input#from'),
        $('.objects-adding-search > footer #left-content .input-from-to:nth-child(2) .content-form input#to')
    ];
    var range = [
        $('.objects-adding-search > footer #right-content .range-form:nth-child(1) input[type="range"]#min'),
        $('.objects-adding-search > footer #right-content .range-form:nth-child(1) input[type="range"]#max')
    ];
    var evenrange = [
        $('.objects-adding-search > footer #right-content .range-form:nth-child(2) input[type="range"]#min'),
        $('.objects-adding-search > footer #right-content .range-form:nth-child(2) input[type="range"]#max')
    ];

    for (let i = 0; i < range.length; i++) {
        const a = range[i],
              b = evenrange[i],
              d = rangeeventext[i];


        a.bind('input', function (e) {
                var val = $(this).val();
                var curmax = rangetext[i];
                var query;
                query = val + " m2";
                curmax.val(query);
        });
        b.bind('input', function (e) {
                var val = $(this).val();
                var curmax = d;
                var query;
                query = val;
                curmax.val(query);
        });
        
        
    }

    for (let i = 0; i < range.length; i++) {
      rangetext[i].bind('input change', function (e,t) {
          const v = $(this).val(),
                r = range[i];
          let rangeFigure;

          if (v.indexOf(" m2") != -1) { rangeFigure = parseInt(v.slice(0,-3)); } 
          else { rangeFigure = parseInt(v); }

          r.val(rangeFigure);
          $(this).val(rangeFigure + ' m2');
      });
        
    }
    for (let i = 0; i < evenrange.length; i++) {
        rangeeventext[i].bind('input change', function (e,t) {
            const v = $(this).val(),
            r = evenrange[i];

            r.val(parseInt(v));
        });
    }


}
$(document).ready(function () {
    RangeInput();
});

Как правильно реализовывать элемент ввода диапазона с двумя слайдерами?

Pashok Doom , ещё в чем фишка:

Чтобы при смене значений в поле текстового ввода, менялось значение и в элементах ввода диапазонов.
А JQuery UI позволяет это сделать?
Мне нужны только варианты без JQuery UI!

Как добавить надпись на цветной фон?

v3shin, воспользуясь вашим вариантом, все надписи вместились под шапкой, но потом их правильно сумел распологать, как надо и вышла проблема, которую трудно решать

Как добавить надпись на цветной фон?

v3shin , и возникла вот такая ситуация:

Такие блоки как #news, имеют абсолютное позиционирование, а шапка с контентом внутри них - относительное. Вышло так, когда я распологал правильно надписи, над футером и под контентом вышла белая полоса, которую очень трудно исправить...

Пример одной из трёх страниц, где присуствует данная проблема:

Как это убрать и исправить?

Как добавить надпись на цветной фон?

Большое спасибо! Помогло очень хорошо

Как разместить блок внутри псевдоэлемента?

Пример структуры promoblock_content на HTML в соответствии с вашим вариантом из браузера:

<div class="promoblock swiper-slide">
                        <div class="promoblock_content" style="background-color:white;">
                            <header>
                                <a href=""><strong>Factorys</strong>(92)</a>
                            </header>
                            <main>
                                <span class="location">
                                    Austria
                                </span>
                                <img src="https://lyubimiigorod.ru/web/v2assets/img/noImg_2-1.jpg" alt="Not image">
                            </main>
                            <footer>
                            <div class="info">
                                    <span>Austria, a plant for the production of sausages...</span>
                                    <span>&nbsp;</span>
                                    <span>&dollar; 10 300 000</span>
                                </div>
                                <div class="raiting">
                                    <span>Expert Raiting</span>
                                    <div class="rating-mini">
                                        <span class="active"></span>	
                                        <span class="active"></span>    
                                        <span class="active"></span> 
                                        <span class="active"></span>	
                                        <span class="active"></span>    
                                        <span class="active"></span>
                                        <span class="active"></span>    
                                        <span></span>
                                        <span></span>    
                                        <span></span>
                                    </div>
                                </div>
                            </footer>
                       </div>
                    </div>