时间戳

首页 > 解决方案 > 如何在 ReactNative 中访问另一个控件中的一个控件属性

react-native - 如何在 ReactNative 中访问另一个控件中的一个控件属性

问题描述

我想在 react native 中从 HelloWorldApp 组件类访问 this.state.sampleString 到 CustomWebView 组件类，但在警报中 this.props.sampleString 显示“未定义”。

这是我的代码：

class CustomWebView extends Component{
  constructor(props){
     super(props);
     this.state = { text: 'http://www.google.com' };
  }

  render() {
    alert(this.props.sampleString);
    return (

      <WebView 
      source={{uri:this.state.text}}
      style={{marginTop: 50}}
      />    

       );
  }

}

export default class HelloWorldApp extends Component {
  constructor(props) {
    super(props);
    this.state = { sampleString: 'http://www.google.com' };
    this.getValue = this.getValue.bind(this);
  }

  getValue(){
    //console.log(this.state.sampleString);
    return this.state.sampleString
}

  handleClick = () => {
    alert(this.state.sampleString);
}

  render(){ 
    const {isFocused} = this.state;
    const{onFocus,onBlur} = this.props;

    return (
      <View style={{
        flexDirection: 'column',
        height: '100%',
        paddingTop: 36
      }}>

    <View style={{
      flexDirection: 'row',
      height : '5%',
      width : '100%',
      justifyContent: 'flex-start',
      paddingBottom:3,
      paddingTop:1,
      marginTop : 20
    }}>

    <TextInput
    selectionColor = {BLUE}
    ref = "urltext"
    underlineColorAndroid={isFocused?BLUE:LIGHT_GRAY}
    onFocus = {this.handleFocus}
    onBlur ={this.handleBlur}
    style={styles.textInput}
    onChangeText={(sampleString) => this.setState({sampleString})}
    value={this.state.sampleString}
    />
    <Button title="Submit"
     onPress = {this.handleClick.bind(this)}
     color="#9933ff"
     accessibilityLabel="TestButton"/>



    </View>
    <CustomWebView/>
    </View>
    );
 }

} })

我需要在 HelloWorldApp 类中 Button 的 onPress 事件上更改类 CustomWebView 中的 url。这就是我想在 CustomWebView 类中访问 this.props.sampleString 的原因。

标签： react-native

解决方案

首先，您使用了错误的方法来更新onChangeTextas 的状态，

onChangeText={(sampleString) => this.setState({sampleString})}

当你使用上述方法时，你会得到一个错误，比如，

sampleState 未定义

因为您必须使用方法中的更新值定义要更新的状态setState。您必须将状态更新为，

onChangeText={(inputText) => this.setState({sampleString: inputText})}

然后你可以把这个 sampleStringCustomWebView作为 prop 传入，

<CustomWebView uri = {this.state.sampleString} />

最后，您可以在 CustomWebView 中访问此道具，

<WebView 
  source={{ uri: this.props.uri }}
  style={{ marginTop: 50 }}
/>

一切都完成了:)

注意： -因为您正在更新状态onChangeText，并同时将此状态作为道具传递给 CustomWebView。CustomWebView 无需单击按钮即可访问此状态。

推荐阅读