Jump to content
Litminov

React Native'de child'tan parent'a nasıl data aktaracağız?

Öne çıkan mesajlar

§ 10 Haz 2021, 12:49

Hook yapısını anlamak için Functional Child component'te bir text input yaptım. Bu child component'teki textinput'a girilen değerin class based Parent'taki this.state.name'e aktarmak istiyorum. 

 


const NameInput  = (props) => {

    const [text, onChangeText] = React.useState(null);

    return ( <TextInput 
    autoCapitalize='none' 
    onChangeText={onChangeText} 
    style={styles.userTextInput} />)
}

 

Bunu parent'a gönderirken nasıl gönderebilirim? Parent'a import ettim. Component'ı çağırırken attribute bağlantısını nasıl kurmalıyım? 

Litminov tarafından düzenlendi

Bu mesajı paylaş


Bu mesajın linki
Sosyal ağlarda paylaş
§ 10 Haz 2021, 13:33

Redux gibi herhangi bir state manager kullanimiyorsan, parent'ta bir callback function yaratip bunu child'in props'una vermen gerekiyor. Daha sonra child'ta bunu kullanicaksin istedigin zaman

asagidaki snippet guzel anlatmis, parent'ta handleCallback yaratip bunu props olarak child'a paslamis

daha sonra da onSubmit ile de calistirmis.

import React from 'react';

class Parent extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            data: null
        }
    }

    handleCallback = (childData) =>{
        this.setState({data: childData})
    }

    render(){
        const {data} = this.state;
        return(
            <div>
                <Child parentCallback = {this.handleCallback}/>
                {data}
            </div>
        )
    }
}

class Child extends React.Component{
  
    onTrigger = (event) => {
        this.props.parentCallback("Data from child");
        event.preventDefault();
    }

    render(){
        return(
        <div>
            <form onSubmit = {this.onTrigger}>
                <input type = "submit" value = "Submit"/>
            </form>
        </div>
        )
    }
}

export default Parent;

 

Bu mesajı paylaş


Bu mesajın linki
Sosyal ağlarda paylaş
§ 10 Haz 2021, 13:47

Kullanici hareketiyle degisen degerlere sahip component'lerde (input, select vs.) state yonetimi biraz cetrefilli, React'in internal state'indeki degisiklikten oturu olusan update ile, kullanicinin elle bi sey ypamasindan olusan update cakistiginda sikinti cikabiliyo.

O yuzden input gibi seylerde genelde initial value'yu disardan almak, icerde internal state tutup bunu bu degerle initialize etmek, kullanici girdikce icerdeki state'i guncellemek ve guncelleme gerceklesinde yine prop'larla iletilen bi callback'i cagirmak lazim senko'nun ornegindeki gibi.

Bi diger konu da duz input'lara null ve undefined gecilince React'in kizmasi. Onlar yerine bos string gecmek daha faydali oluyo genelde.

Sonuc olarak senin ornekten gidince soyle bi sey cikiyo ortaya:

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.onTextChanged = this.onTextChanged.bind(this);
        this.state = {
            text: ''
        };
    }

    onTextChanged(text) {
        this.setState({text});
    }

    render() {
        const {text} = this.text;
        return (
            <div>
                ...
                <NameInput initialValue={text} onChange={this.onTextChanged} />
            </div>
        )
    }
}

const NameInput = ({onChange, initialValue = ''}) => {
    const [text, setText] = React.useState(initialValue);

    function onTextChanged(newText) {
        if (onChange) {
            onChange(newText);
        }

        setText(newText);
    }

    return <TextInput onChangeText={onTextChanged} ... />
};

 

Bu mesajı paylaş


Bu mesajın linki
Sosyal ağlarda paylaş
§ 10 Haz 2021, 19:22

context, redux vb yapılar ile datayı dışarda tutmak ve actionlar ile etkileşimde bulunmak en doğru yöntem genelde. internal state tutulduğunda data tutarlılığı riske girebiliyor.

Bu mesajı paylaş


Bu mesajın linki
Sosyal ağlarda paylaş

Yorum yazmak için üye olun veya giriş yapın

Yorum yazmak için üye olmanız lazım

Üye ol

Kayıt olun ve aramıza katılın!

Yeni bir hesap oluştur

Giriş yap

Zaten üyemiz misin? O halde giriş yap

Hemen giriş yap

Yasal Duyuru

5651 sayılı kanun kapsamında, Paticik.com, işbu sayfadaki mesajların ve içeriğin Yer Sağlayıcısıdır. Yayınlanan içeriklerden doğabilecek her türlü sorumluluk içeriği üreten kullanıcıya aittir. Şikayet ve talepleriniz için buraya tıklayıp bize ulaşabilirsiniz. Alternatif olarak [email protected] e-posta adresinden bize ulaşabilirsiniz.

×
×
  • Yeni Oluştur...