访问.jsx元素内的状态

Question

If I have an element like this:

const CardWebView = () => {
  const url = 'xxx';

  return (
    <WebView
    source={{
      uri: url,
    }}
    onNavigationStateChange={this.onNavigationStateChange}
    startInLoadingState
    javaScriptEnabled
    style={{ flex: 1 }}
  />
  );
};

How do I use state to change the url , for example?

I've tried var url = this.state.url but this gives me an error. This specific portion of code uses arrow functions and I'm not too familiar with them.

Answer 1

You should use React Hooks on Functional Component - Using the State Hook – React

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Answer 2

You need to define a React.Component with a render method. You can't have state if you're not in a component

const CardWebView = <CardWebView />

class CardWebView extends React.Component{
  constructor(props) {
     super(props);
     this.state = {url: 'xxx'};
  }

  render() {
    return (
      <WebView
      source={{
        uri: this.state.url,
      }}
      onNavigationStateChange={this.onNavigationStateChange}
      startInLoadingState
      javaScriptEnabled
      style={{ flex: 1 }}
    />
    );
  }
};

Answer 3

If you want to use state from a functional component, you need to use the useState hook

It is fairly simple to use, just define the initial value, the callback to change it and the name of the state variable and you're set. Then you can use the callback to alter the state variable whenever you need to.

a simple example:

import React, { useState } from 'react';
import { Text, View } from 'react-native';

const App = () => {

  const [url, setUrl] = useState('something')

  return (
    <View>
      <Text>{url}</Text>
      <Text onPress={() => setUrl('something new')}>Click me</Text>
    </View>
  );
}

export default App;