React-da tashqi SetState-ni qanday qo'llash mumkin

Savol: "SignupForm" deb nomlangan Reakt komponenti bor va uni quyidagicha kengaytirishga urinaman:

export default class UserSignup extends Component  {
    render() {
        const obForm = ;
        obForm.setState({lockAccountType: true});
        return obForm;
    }
}

But this throws an error that the constant obForm lacks a setState method, Uncaught (in promise) TypeError: obForm.setState is not a function

Bu reaktsiya komponentining holatini belgilash uchun qanday yo'l tutishim kerak? Buning uchun eng to'g'ri yo'lni his qilaman.

1

6 javoblar

UserSignup'dan SignupForm-ga o'tishni xohlaysiz

SignupForm komponentida davlatni lockAccountType panjarasi bilan belgilang. Aksariyat odamlar componentDidMount hayot aylanish usuli bilan buni amalga oshiradilar. SignupFormni lockAccountType = {Boolean} boshlangich holatini bering va uni componentDidMount-da sizning prop bilan o'zgartiring.

1
qo'shib qo'ydi

UserSignup'dan SignupForm-ga o'tishni xohlaysiz

SignupForm komponentida davlatni lockAccountType panjarasi bilan belgilang. Aksariyat odamlar componentDidMount hayot aylanish usuli bilan buni amalga oshiradilar. SignupFormni lockAccountType = {Boolean} boshlangich holatini bering va uni componentDidMount-da sizning prop bilan o'zgartiring.

1
qo'shib qo'ydi

Sizga ba'zi bir aniq kontekstni taqdim etayotib, boshqa ba'zi javoblarni aks ettirishni xohladingiz.

UserSignup.js

import React, { Component } from 'react';
import SignupForm from './SignupForm';

export default class UserSignup extends Component  {
    render() {
        return (
            
        );
    }
}

SignupForm.js

import React, { Component, PropTypes } from 'react';
import { Text } from 'react-native';

export default class SignupForm extends Component  {
    constructor(props) {
        super(props);
        this.state = {lockAccountType: this.props.lockAccountType};
    }

    render() {
        return (
            
                {'lockAccountType: ' + this.state.lockAccountType}
            
        );
    }
}

SignupForm.propTypes = {
    lockAccountType: React.PropTypes.bool.isRequired
};

( SignupForm.render() ni aniq aniqlik bilan o'zgartirishga harakat qiling.

Boshqalar eslatib o'tdiki, siz ro'yxatdan o'tish formasida lockAccountType qiymatini bekor qilmoqchisiz.

Mening misolimda bu qiymat statik ( true ). Agar siz ushbu qiymatni o'zgartirishni xohlasangiz, uni UserSignup da davlat o'zgaruvchisi sifatida olishingiz mumkin:

UserSignup.js (o'zgartirilgan)

import React, { Component } from 'react';
import SignupForm from './SignupForm';

export default class UserSignup extends Component  {
    constructor() {
        super();
        this.state = {lockAccountType: true};
    }

    render() {
        return (
            
        );
    }
}

Ehtimol, ushbu davlat qiymatini moslashtiradigan funksiyalarni qo'shishni xohlaysiz. Umuman olganda, sizning davlatingizdagi har qanday o'zgarishlar ushbu komponentni qayta tiklashga olib keladi. Bunday holda, o'zgarishlar SignupForm elementiga tarqaladi va kerakli natijaga erishish kerak.

Bir nechta oxirgi eslatma

  • Sizning sinflaringizda propTiplarni ko'rsatishni maslahat beraman. Rivojlanayotganingizda, qadamlarni qadriyatlarga tayinlaganingizda, bu sizga har qanday muammolar haqida sizni ogohlantiradi. Ushbu misolda lockAccountType ko'rsatilmagan bo'lsa yoki noto'g'ri tur bo'lsa, biz ogohlantirishni ko'rgan bo'lar edik. Agar siz .isRequired kodini olib tashlasangiz, u sizni noto'g'ri turlardan ogohlantiradi.
  • lockAccountType kodini to'g'ridan-to'g'ri SignupForm sinfidan o'zgartirishni xohlamasangiz, to'g'ridan-to'g'ri konstruktorni olib tashlashingiz va this.props dan foydalanishingiz mumkin. lockdaAkcountType ni tanlang. Ushbu stsenariyda SignupForm vatansiz sinfi bo'ladi.

Umid qilamanki bu yordam.

0
qo'shib qo'ydi

Sizga ba'zi bir aniq kontekstni taqdim etayotib, boshqa ba'zi javoblarni aks ettirishni xohladingiz.

UserSignup.js

import React, { Component } from 'react';
import SignupForm from './SignupForm';

export default class UserSignup extends Component  {
    render() {
        return (
            
        );
    }
}

SignupForm.js

import React, { Component, PropTypes } from 'react';
import { Text } from 'react-native';

export default class SignupForm extends Component  {
    constructor(props) {
        super(props);
        this.state = {lockAccountType: this.props.lockAccountType};
    }

    render() {
        return (
            
                {'lockAccountType: ' + this.state.lockAccountType}
            
        );
    }
}

SignupForm.propTypes = {
    lockAccountType: React.PropTypes.bool.isRequired
};

( SignupForm.render() ni aniq aniqlik bilan o'zgartirishga harakat qiling.

Boshqalar eslatib o'tdiki, siz ro'yxatdan o'tish formasida lockAccountType qiymatini bekor qilmoqchisiz.

Mening misolimda bu qiymat statik ( true ). Agar siz ushbu qiymatni o'zgartirishni xohlasangiz, uni UserSignup da davlat o'zgaruvchisi sifatida olishingiz mumkin:

UserSignup.js (o'zgartirilgan)

import React, { Component } from 'react';
import SignupForm from './SignupForm';

export default class UserSignup extends Component  {
    constructor() {
        super();
        this.state = {lockAccountType: true};
    }

    render() {
        return (
            
        );
    }
}

Ehtimol, ushbu davlat qiymatini moslashtiradigan funksiyalarni qo'shishni xohlaysiz. Umuman olganda, sizning davlatingizdagi har qanday o'zgarishlar ushbu komponentni qayta tiklashga olib keladi. Bunday holda, o'zgarishlar SignupForm elementiga tarqaladi va kerakli natijaga erishish kerak.

Bir nechta oxirgi eslatma

  • Sizning sinflaringizda propTiplarni ko'rsatishni maslahat beraman. Rivojlanayotganingizda, qadamlarni qadriyatlarga tayinlaganingizda, bu sizga har qanday muammolar haqida sizni ogohlantiradi. Ushbu misolda lockAccountType ko'rsatilmagan bo'lsa yoki noto'g'ri tur bo'lsa, biz ogohlantirishni ko'rgan bo'lar edik. Agar siz .isRequired kodini olib tashlasangiz, u sizni noto'g'ri turlardan ogohlantiradi.
  • lockAccountType kodini to'g'ridan-to'g'ri SignupForm sinfidan o'zgartirishni xohlamasangiz, to'g'ridan-to'g'ri konstruktorni olib tashlashingiz va this.props dan foydalanishingiz mumkin. lockdaAkcountType ni tanlang. Ushbu stsenariyda SignupForm vatansiz sinfi bo'ladi.

Umid qilamanki bu yordam.

0
qo'shib qo'ydi

ota-komponentingizda davlat va bolali komponentlar mavjud bo'lib, ular davlat mulki sifatida rekvizitlar kabi olinadi. Ota-ona komponentda bolali komponentga uzatiladigan davlat almashtiruvchi ishlov beruvchisi bo'ladi. Davlat maqola komponentida o'zgaradi, shuning uchun setState har doim yangi holatni qayta tiklaydi.

var Header = React.createClass({
    getInitialState: function(){
        return { name: 'Mike' }
    },
    render: function(){
        return(
            <div>
                

Welcome {this.state.name}

                <input type="text" value={this.state.name} onChange={this.handleStateChange}  />

                

                
            </div>
        )
    },
    handleStateChange: function(event){
        console.log(event.target.value);
        this.setState({name: event.target.value});
    },
    handleChangeProps: function(name){
        console.log(name);
        this.setState({name: name})
    }
});


var Footer = React.createClass({
    render: function(){
        return(
            <div>
                

Welcome {this.props.fName}

                <input type="text" value={this.props.fName} onChange={this.handlePropChange}/>
            </div>
        )
    },
    handlePropChange: function(event){
        console.log(event.target.value);
        this.props.changeProps(event.target.value);
    }
})



var pageElement = React.createElement(Header, {});

React.render(pageElement, document.getElementById('my-app'));
0
qo'shib qo'ydi

ota-komponentingizda davlat va bolali komponentlar mavjud bo'lib, ular davlat mulki sifatida rekvizitlar kabi olinadi. Ota-ona komponentda bolali komponentga uzatiladigan davlat almashtiruvchi ishlov beruvchisi bo'ladi. Davlat maqola komponentida o'zgaradi, shuning uchun setState har doim yangi holatni qayta tiklaydi.

var Header = React.createClass({
    getInitialState: function(){
        return { name: 'Mike' }
    },
    render: function(){
        return(
            <div>
                

Welcome {this.state.name}

                <input type="text" value={this.state.name} onChange={this.handleStateChange}  />

                

                
            </div>
        )
    },
    handleStateChange: function(event){
        console.log(event.target.value);
        this.setState({name: event.target.value});
    },
    handleChangeProps: function(name){
        console.log(name);
        this.setState({name: name})
    }
});


var Footer = React.createClass({
    render: function(){
        return(
            <div>
                

Welcome {this.props.fName}

                <input type="text" value={this.props.fName} onChange={this.handlePropChange}/>
            </div>
        )
    },
    handlePropChange: function(event){
        console.log(event.target.value);
        this.props.changeProps(event.target.value);
    }
})



var pageElement = React.createElement(Header, {});

React.render(pageElement, document.getElementById('my-app'));
0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb

ReactJS & ReactNative Uzbekistan
ReactJS & ReactNative Uzbekistan
81 ishtirokchilar

Guruh ReactJS va ReactNative bo'yicha muloqot qilish uchun ochilgan. Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @ngTashkent @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs