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

Question

我想从 HelloWorldApp 组件访问 this.state.sampleString 类到自定义WebView组件类在反应本机中，但处于警报状态 this.props.sampleString 显示 'undefined'。

这是我的代码：

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>
    );
 }   

}})

我需要在类自定义WebView上更改URL在按钮的onPress事件中你好世界应用类。这就是为什么我想在CustomWebView类中访问this.props.sampleString。

Answer 1

像这样使用CustomWebView

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

Answer 2

请执行以下操作：

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

在自定义WebView上，您应该使用props - sampleString，而不是状态变量 - text 。

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.props.sampleString }}
      style={{ marginTop: 50 }}
      />    
       );
  }
}

Answer 3

首先，您使用了错误的方法将状态更新为 onChangeText，

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

当您使用上述方法时，您可能会收到类似这样的错误，

未定义样本状态

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

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

然后你可以在CustomWebView中传递这个样本字符串作为 prop，

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

最后，您可以在自定义WebView中访问此道具，如下所示：

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

一切都:)

注意： - 因为您正在onChangeText更新状态，同时将此状态作为 prop 传递到自定义Web视图中。自定义WebView无需单击按钮即可访问此状态。

Answer 4

你必须采用两个状态变量。 第一个用于文本输入，第二个用于呈现 Webview，您必须在自定义 Web 视图组件中传递它。您的 HelloWorldApp 类应如下所示：

export default class HelloWorldApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
     textInputData: 'http://www.google.com'
     sampleString: 'http://www.google.com' 
   };
  }
  handleClick(){
   //set sampleString when click on button
   this.setState({
      sampleString: this.state.textInputData
    })
}
  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={(inputText) => this.setState({textInputData: inputText})}
    value={this.state.textInputData}
    />
    <Button title="Submit"
     onPress = {this.handleClick.bind(this)}
     color="#9933ff"
     accessibilityLabel="TestButton"/>
    </View>
    <CustomWebView
     sampleString={this.state.sampleString} />
    </View>
    );
 }
} }) 

您将在 CustomWebView 组件的 componentWillReceiveProps（） 中获得更新的 sampleString

class CustomWebView extends Component{
  constructor(props){
     super(props);
     this.state = { 
text: 'http://www.google.com'
 };
  }
  componentWillMount(){
   this.setState({ text:this.props.sampleString })
 }
 componentWillReceiveProps(newProps){
  //when will you update url in textinput and do submit. you will get updated 
   sampleString here.
   this.setState({ text:newProps.sampleString })
 }
  render() {
    return (
      <WebView 
      source={{uri:this.state.text}}
      style={{marginTop: 50}}
      />    
       );
  }
}