Блог

Я использовал крючок useState. onSubmitEditing, т. е. нажатие клавиши enter, должна выполняться команда setTmpItem, которая должна установить значение InputBox в переменной tmpItem. Переданный реквизит addSubject также является крючком, который можно увидеть во 2-м коде(app.js)

Но когда я нажимаю кнопку округления, она не регистрирует консоль ни 1, ни 2, а также addSubject(tmpItem) не работает.

Focus.js ниже

 import React, { useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { TextInput } from 'react-native-paper';
import { RoundedButton } from '../../components/RoundedButton';

export const Focus = ({ addSubject }) => {
  const [tmpItem, setTmpItem] = useState(null);
  return (
    <View style={styles.container}>
      <View>
        <Text> What would you like to focus on? </Text>
        <View>
          <TextInput
            onSubmitEditing={({ nativeEvent: { text } }) => {
              setTmpItem(text);
            }}
          />
          <RoundedButton
            size={50}
            title=" "
            onPress={() => {
              console.log("1");
              addSubject(tmpItem);
              console.log("2");
            }}
          />
        </View>
      </View>
    </View>
  );
};


 

App.js ниже

 //App.js is the central point to glue everything
import React, { useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { Focus } from './src/features/focus/Focus';

export default function App() {
  const [focusSubject, setFocusSubject] = useState(null);
  return (
    <View>
      {focusSubject ? (
        <Text>Where am I going to build a timer</Text>
      ) : (
        <Focus addSubject = {setFocusSubject}/>
      )}
      <Text>{focusSubject}</Text>
    </View>
  );
}


 

RoundedButton.js ниже

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

export const RoundedButton = ({
  style = {},
  textStyle = {},
  size = 125,
  ...props
}) => {
  return (
      <TouchableOpacity>
        <Text>{props.title}</Text>
      </TouchableOpacity>
  );
};

 

Вам нужно обработать свой TextInput Focus.js запрос, передав value и onChangeText реквизит в TextInput компоненте, например:

 export const Focus = ({ addSubject }) => {
  const [tmpItem, setTmpItem] = useState(null);

  const onSubmit = () => {
     //and handle this onSubmit function the way you want to
     //or pass the addSubject props
     addSubject(tmpItem);
  }

  return (
    <View style={styles.container}>
      <View>
        <Text> What would you like to focus on? </Text>
        <View>
          <TextInput
            onChangeText={setTmpItem}
            value={tmpItem}
            onSubmitEditing={() => onSubmit()}
          />
          <RoundedButton
            size={50}
            title=" "
            onPress={() => {
              addSubject(tmpItem);
            }}
          />
        </View>
      </View>
    </View>
  );
};
 

Кроме того, причина, по которой вы не работаете в том, что вы не передаете эту информацию своему сотруднику . console.log RoundedButton onPress TouchableOpacity RoundedButton В RoundedButton.js сделай это вот так:

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

export const RoundedButton = ({
  style = {},
  textStyle = {},
  size = 125,
  ...props
}) => {
  return (
      <TouchableOpacity onPress={props.onPress}>
        <Text>{props.title}</Text>
      </TouchableOpacity>
  );
};
 

props.onPress вот чего тебе не хватает.
Надеюсь, это сработает для вас.