如何将 useState 从功能组件传递给函数？

Question

所以对于我的大学项目，我需要制作一个可以从服务器获取数据并登录到用户的应用程序。

对于登录功能组件，这是我使用的代码，

const login = () =>{
let number= this.State.number;

if(number.length==0){
  alert("Required Field is Missing");
}

else{
  let api="http://127.0.0.1/Project18/login.php";

  let headers = {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  };

  let Data = {
    number:number,
};

fetch(api,{
  method:'GET',
  headers: headers,
  body: JSON.stringify(Data)
})
.then((response) =>response.json())
.then((response)=>{
  alert(response[0].Message);
})
.catch((error) => {
  alert("Error"+error);
  })
}
 }

 function Login(props) {
 const [text, setText] = useState('');
 return (
  <View>
  <TextInput 
  style={{width:200,margin:10}}
  placeholder="Enter Phone Number"
  placeholderTextColor={"tomato"}
  onChangeText={number => setText(number)}
  defaultValue={text}
  ></TextInput>
  <Button 
  title="Login" 
  style={styles.loginButton} 
  onPress={login}
  >
  </Button>
  <Text>Hello</Text>
  </View>
);

}

我需要做的就是将“setText(number)”组件传递给 login() 函数，以便

let number= 获取其值。

我对react native了解很少，所以没能完成这个项目。感谢任何帮助。

Answer 1

您可以将 text 状态传递给您的 login 函数，如下所示。

function Login(props) {
 const [text, setText] = useState('');
 return (
  <View>
  <TextInput 
  style={{width:200,margin:10}}
  placeholder="Enter Phone Number"
  placeholderTextColor={"tomato"}
  onChangeText={number => setText(number)}
  defaultValue={text}
  ></TextInput>
  <Button 
  title="Login" 
  style={styles.loginButton} 
  onPress={() => login(text)}
  >
  </Button>
  <Text>Hello</Text>
  </View>
);

然后在text中使用如下。

const login = (text) =>{
   let number= text;
   ...

Answer 2

您可以在登录组件中声明登录功能。

function Login(props) {
 const [text, setText] = useState('');

 const login = () => {
   let number= text;
   if(number.length==0){
     alert("Required Field is Missing");
   } else {
     let api="http://127.0.0.1/Project18/login.php";
     let headers = {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
     };
     let Data = {
       number:number,
     };
    fetch(api,{
      method:'GET',
      headers: headers,
      body: JSON.stringify(Data)
    })
    .then((response) =>response.json())
    .then((response)=>{
      alert(response[0].Message);
      // use setText() here
    })
    .catch((error) => {
      alert("Error"+error);
    })
   }
 };

 return (
  <View>
  <TextInput 
  style={{width:200,margin:10}}
  placeholder="Enter Phone Number"
  placeholderTextColor={"tomato"}
  onChangeText={number => setText(number)}
  defaultValue={text}
  ></TextInput>
  <Button 
  title="Login" 
  style={styles.loginButton} 
  onPress={login}
  >
  </Button>
  <Text>Hello</Text>
  </View>
);

如何将 useState 从功能组件传递给函数？

How to pass an useState to a Function from a Funtional Component?

setstate

react-native

react-functional-component

use-state