时间戳

首页 > 解决方案 > 如何获得输入的价值 - reac native？

javascript - 如何获得输入的价值 - reac native？

问题描述

我试图在用户单击提交后获取输入的值，我有一个简单的表单要求用户签名，

当用户单击提交时，在handleLogin 中，我调用handleSignature 并将签名传递给输入，但是我迷路了如何获取该字段的值，是包含signature.led 的字段。

 export default function Form({navigation}) {
    
    const handleLogin = (data, setSubmitting) => {  
        handleSignature();
    
    
    }

    return (      
        <>
            <Formik   
                initialValues = {{first_name: '', last_name:' }}
                onSubmit = { (values, {setSubmitting }) => { 
                        
            
                    handleLogin(values, setSubmitting);
                
                }}>

                {({handleChange, handleBlur, handleSubmit, values, isSubmitting, errors, touched}) => ( 
                    
                    <> 
                        <View style={styles.CONTENT}>
                        
                        <View style={styles.INPUTS}>
                                                    
                            <MyTextInput
                                label           = "First Name" 
                                onChangeText    = {handleChange('first_name')}
                                onBlur          = {handleBlur('first_name')}
                                values          = {values.first_name || ''}
                                returnKeyType   = "next"
                                innerRef        = {input1}    
                                
                            />
                            
                            <MyTextInput
                                label           = "Last Name" 
                                onChangeText    = {handleChange('last_name')}
                                onBlur          = {handleBlur('last_name')}
                                values          = {values.last_name}
                                returnKeyType   = "next"
                                refInner        = {input2} 
                            /> 

                            <MyTextInput 
                                values          = {signature} 
                            /> 
                        </View>
                </>
        </Formik>
    )

标签： javascriptreactjsformsreact-native

解决方案

如果要获取输入的值，则需要将值绑定到状态，如下所示

          constructor(props) {
                super(props);

            this.state = {
               first_name: '',  // state
               last_name: ''  
            };
          }


          <MyTextInput
              label="First Name"
              onBlur={handleBlur('first_name')}
              values={values.first_name || ''}
              returnKeyType="next"
              innerRef={input1}
              onChangeText={e => this.setState({first_name: e})} // binding value
            />

当您绑定值时，您可以在任何函数上获取值，如下所示

const handleLogin = (data, setSubmitting) => {  
     handleSignature();
     console.log(this.state.first_name) // the value of input
}

如果您使用类组件，上述方法将有效，但在您的情况下，您使用的是功能组件，因此您可以使用以下片段解决问题

import React, {useState, useEffect} from 'react';
export default function Form({navigation}) {
  const [firstName, setFirstName] = useState('');
  const [lastName, setlastName] = useState('');

  const handleLogin = (data, setSubmitting) => {
    handleSignature();

    console.log(firstName); // output the firstname
    console.log(lastName); // output the lastname
  };

  return (
    <>
      <MyTextInput
        label="First Name"
        onBlur={handleBlur('first_name')}
        values={values.first_name || ''}
        returnKeyType="next"
        innerRef={input1}
        onChangeText={e => setFirstName(e)} // binding value
      />
    </>
  );
}

推荐阅读