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

[Litminov]

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? 

Haziran 10, 2021 Litminov tarafından düzenlendi

[senko]

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;

 

[Kojiroh]

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

 

[df]

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.