在 React Native 中的组件之间传递数据

Question

我一直在阅读文档并在此处搜索代码，但找不到任何对我有帮助的东西。

我的想法是在触发 onChange 时更改电子邮件和密码值，这样就可以从 App.js 检索相同的数据，但我找不到任何简单的例子来说明它是如何工作的功能组件。

看完后 docs/inet 感觉 ReactNative 已经发生了很大的变化。

这是我的 Form.js 组件：

import React, {useState} from 'react';
import {View, Text, TextInput} from 'react-native';
import styles from './styles';

const Form = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <View styles={styles.container}>
      <Text style={styles.inputLabel}>Email</Text>
      <TextInput
        placeholder="Email"
        onChangeText={email => setEmail(email)}
        style={styles.input}
        value={email}
      />
      <Text style={styles.inputLabel}>Password</Text>
      <TextInput
        secureTextEntry={true}
        placeholder="Password"
        onChangeText={password => setPassword(password)}
        style={styles.input}
        value={password}
      />
    </View>
  );
};

export default Form;

还有我的App.js组件

import React from 'react';
import {View, Button} from 'react-native';
import styles from './styles';
import Form from './Form';
import Greeting from './Greeting';
import Terms from './Terms';

const handleButton = data => {
  console.log(data);
};

const App = () => {
  return (
    <View style={styles.container}>
      <Greeting />
      <Form />
      <Terms />
      <View style={{marginTop: 35}}>
        <Button
          onPress={() => handleButton(Form['email'])}
          style={styles.confirmBtn}
          title="Crear cuenta"
        />
      </View>
    </View>
  );
};

export default App;

Answer 1

由于 Form.js 是 App.js 的子组件，您需要在 App.js 中初始化状态并将 setState 函数传递给 Form.js，如下所示

App.js

import React, {useState} from 'react';
import {View, Button} from 'react-native';
import styles from './styles';
import Form from './Form';
import Greeting from './Greeting';
import Terms from './Terms';

const App = () => {

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleButton = data => {
    console.log(email);
  };

  return (
    <View style={styles.container}>
      <Greeting />
      <Form setEmail={(e)=>setEmail(e)} setPassword={(p)=>setPassword(p)} />
      <Terms />
      <View style={{marginTop: 35}}>
        <Button
          onPress={() => handleButton()}
          style={styles.confirmBtn}
          title="Crear cuenta"
        />
      </View>
    </View>
  );
};

export default App;

Form.js

import React, {useState} from 'react';
import {View, Text, TextInput} from 'react-native';
import styles from './styles';

const Form = ({setEmail,setPassword}) => {

  return (
    <View styles={styles.container}>
      <Text style={styles.inputLabel}>Email</Text>
      <TextInput
        placeholder="Email"
        onChangeText={email => setEmail(email)}
        style={styles.input}
        value={email}
      />
      <Text style={styles.inputLabel}>Password</Text>
      <TextInput
        secureTextEntry={true}
        placeholder="Password"
        onChangeText={password => setPassword(password)}
        style={styles.input}
        value={password}
      />
    </View>
  );
};

export default Form;

在 React Native 中的组件之间传递数据

Pass data between components in React Native

components

between

react-native