Başka bir bileşenle yerel iki yönlü bağlama React

Question

Sadece üç hafta boyunca yerel tepkileri öğreniyorum ve ebeveyn üzerindeki duruma bağlı olarak özel denetleyici değerini güncelleştirmekte zorluk yaşıyorum. kodunda js fiddle to react native

i özel denetim girişten yazdığınızda, ebeveyn giriş güncellendi var: Burada

keman olduğunu. Ancak, ana girişten yazdığımda, özel kontrol girişi güncellenmez.

Hatalarımı işaret edebilir misiniz lütfen?

Ayrıca burada benim kodudur:

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TextInput 
} = React; 

var CustomControl = React.createClass({ 
    propTypes: { 
     onChangeTextValue: React.PropTypes.func, 
     value: React.PropTypes.string.isRequired 
    }, 

    getDefaultProps: function() { 
     return { 
      onChangeTextValue:() => { }, 
      value: "" 
     } 
    }, 

getInitialState: function() { 
    return { 
     text: this.props.value 
    }; 
}, 

setText: function(value) { 
    this.setState({ 
     text: value 
    }); 
    try { 
     return this.props.onChangeTextValue(value); 
    } catch (_error) { } 
}, 

render: function(){ 
    return (
     <TextInput 
      style={{ height: 40, borderColor: 'gray', 
        borderWidth: 1 }} 
      onChangeText={this.setText} 
      value={this.state.text} 
      /> 
     ) 
    } 
}); 

var SampleApp = React.createClass({ 
    getInitialState() { 
     return { 
      'textValue': '' 
     } 
    }, 
    render: function() { 
     return (
      <View style={styles.container}> 
       <Text> 
        Parent Input 
       </Text> 
       <TextInput 
     style={{height: 40, borderColor: 'gray', borderWidth: 1}} 
     onChangeText={(text) => this.setState({textValue:text})} 
     value={this.state.textValue} 
       /> 
       <Text> 
        Custom control input 
       </Text> 

       <CustomControl 
     onChangeTextValue={(text) => this.setState({textValue:text})} 
       value={this.state.textValue} 
       /> 

       <Text style={styles.instructions}> 
        Updating the parent input should update the custom control value too. Right now only when we update the custom control value, the parent input is updated. 
       </Text> 

      </View> 
     ); 
    } 
}); 

sizi :) Sen olmamalıdır hangi Çocuğunuz bileşeninde durumunu depoluyoruz

Answer 1

ederiz, ebeveyn bileşeni hangi gereken bir işleyici onChangeTextValue geçer bunun yerine kullanmak.

var CustomControl = React.createClass({ 
    propTypes: { 
     onChangeTextValue: React.PropTypes.func, 
     value: React.PropTypes.string.isRequired 
    }, 

    render: function(){ 
     return (
      <TextInput 
       style={{ height: 40, borderColor: 'gray', 
         borderWidth: 1 }} 
       onChangeText={this.props.onChangeTextValue} 
       value={this.props.value} 
       /> 
      ) 
     } 
});