Question

我想从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>
    );
 }

} }）

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

Answer 1

像这样使用CustomWebView

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

Answer 2

请按以下步骤操作：

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

在CustomWebView上，应该使用道具-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})}

当您使用上述方法时，会出现类似的错误

sampleState未定义

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

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

然后您可以在CustomWebView中以prop的形式传递此sampleString，

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

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

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

一切都完成了：）

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

Answer 4

您必须采用两个状态变量。 textInput 的第一拳，渲染Webview 的拳头，您必须传入CustomWebView组件。您的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}}
      />    

       );
  }
}

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

4 个答案: