Jump to content
Forumu Destekleyenlere Katılın ×
Paticik Forumları
2000 lerden beri faal olan, çok şukela bir paylaşım platformuyuz. Hoşgeldiniz.

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


Litminov

Öne çıkan mesajlar

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
Link to comment
Sosyal ağlarda paylaş

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;

 

Link to comment
Sosyal ağlarda paylaş

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} ... />
};

 

Link to comment
Sosyal ağlarda paylaş

×
×
  • Yeni Oluştur...