Bagaimana cara mengedit Input Teks? saya sudah memiliki nilai dari database UserData.Email (test@gmail)

  const [ vEmail, setUserEmail] = useState('');
  const [ UserData, setUserData] = useState({});
  const [text, onChangeText] = React.useState('');
  <Formik
      initialValues={{ 
        Email: vEmail, 
       }}
       onSubmit={(values) =>{ console.log("submit"); submitForm(values)}}
    >
    {({ handleChange, handleBlur, handleSubmit, values, errors, isValid,touched,setFieldValue }) => (
<View style={formStyles.SectionStyle}>
  <TextInput
    name="Email"
    value={UserData.Email || ''}
    style={formStyles.inputStyle}
    underlineColorAndroid="#f000"
    placeholderTextColor="#8b9cb5"
    keyboardType="email-address"
    onChangeText={handleChange('Email')}

  />
  
</View>
)

PERBARUI ini adalah cara saya mengambil catatan dari database saya menggunakan api

  const getProfile = async(token) =>{
    let jsonValue = await AsyncStorage.getItem('@storage_Key')
    jsonValue = JSON.parse(jsonValue);
    setProfile(jsonValue);
    console.log(config.API_URL + '/users/'+ jsonValue.userId)
    fetch(config.API_URL + '/users/'+ jsonValue.userId, {

      method: 'GET',
      //body: JSON.stringify(dataToSend),
      headers: {
        //Header Defination
        'Authorization': 'Bearer ' + token,
        'Content-Type': 'application/json',
      },
    })
    .then((response) =>  response.json().then(data=>({status:response.status, body:data})) )
    .then((response) => {
    console.log("User information = ",response);
    if(response.status==200)
        {
          if(response.body.length > 0)
          {         

            let _UserData = {};
            setUserData(response.body[0]);
            setUserEmail(decodeURI(response.body[0].Email))
           

          }else{
            setErrortext(response.body.msg);
            setPreventSubmit(true);
          }
        }else{
          setErrortext(response.body.msg);
          setPreventSubmit(true);
        };
      })
    }

enter image description here

0
user14823468 23 April 2021, 09:11

3 jawaban

Jawaban Terbaik

Karena Anda menggunakan Formik di sini, Anda tidak perlu mempertahankan status level komponen untuk email di sini.

Anda bisa melakukan seperti di bawah ini yang akan menggunakan status Formik dan bisa mendapatkannya saat menggunakan handleSubmit, Contoh kodenya akan seperti di bawah ini

<Formik
  initialValues={{
    Email: 'test1@gmail.com',
  }}
  onSubmit={(values) => {
    console.log('submit');
    alert(values.Email);
  }}>
  {({
    handleChange,
    handleBlur,
    handleSubmit,
    values,
    errors,
    isValid,
    touched,
    setFieldValue,
  }) => (
    <View style={formStyles.SectionStyle}>
      <TextInput
        name="Email"
        value={values['Email']}
        style={formStyles.inputStyle}
        underlineColorAndroid="#f000"
        placeholderTextColor="#8b9cb5"
        keyboardType="email-address"
        onChangeText={handleChange('Email')}
      />
      <Button title="Submit" onPress={handleSubmit}/>
    </View>
  )}
</Formik>

Alih-alih nilai hardcode untuk nilai awal, Anda bisa menggunakan alamat email yang Anda ambil dari database (atau API) Anda

Anda dapat memeriksa demo di bawah ini https://snack.expo.io/@guruparan/d05b51

1
Guruparan Giritharan 23 April 2021, 06:46
const [ vEmail, setUserEmail] = useState('');
const [ UserData, setUserData] = useState({});
const [text, onChangeText] = React.useState('');
<Formik
  initialValues={{ 
    Email: vEmail, 
   }}
   onSubmit={(values) =>{ console.log("submit"); submitForm(values)}}
>
   {({ handleChange, handleBlur, handleSubmit, values, errors, 
   isValid,touched,setFieldValue }) => (
   <View style={formStyles.SectionStyle}>
   <TextInput
    name="Email"
    value={UserData.Email || ''} // this state needs to be update on change
    style={formStyles.inputStyle}
    underlineColorAndroid="#f000"
    placeholderTextColor="#8b9cb5"
    keyboardType="email-address"
    onChangeText={handleChange('Email')} // this is wrong here
  />  
  </View>

useState Anda ada di komponen ini. Jadi, Anda harus memperbarui status Anda dalam komponen ini sendiri pada perubahan TextInput.

onChangeText Anda akan terlihat, seperti ini

onChangeText={(text)=>handleChange(text)}
or
onChangeText={handleChange}

Dalam kedua cara, Anda akan mendapatkan nilai teks dalam handleChange sebagai argumen, tetapi Anda menggunakan nilai TextInput dari UserData.Email. Jadi, Anda harus memperbarui bidang itu di handleChange berarti handleChange Anda harus ada di komponen ini saja.

Semoga Anda mendapatkan poin saya.

0
Rohit Khandelwal 23 April 2021, 06:26

Anda memberikan nilai statis ke input teks. itu harus dinamis

const [ vEmail, setUserEmail] = useState('');
const [ UserData, setUserData] = useState({});
const [text, onChangeText] = React.useState('');
<Formik
  initialValues={{ 
    Email: vEmail, 
   }}
   onSubmit={(values) =>{ console.log("submit"); submitForm(values)}}
>
{({ handleChange, handleBlur, handleSubmit, values, errors, 
isValid,touched,setFieldValue }) => (
<View style={formStyles.SectionStyle}>
<TextInput
  name="Email"
  value={vEmail}
  style={formStyles.inputStyle}
  underlineColorAndroid="#f000"
  placeholderTextColor="#8b9cb5"
  keyboardType="email-address"
  onChangeText={handleChange('Email')}

/>

</View>
)

VEmail harus berisi alamat email yang diambil dari database. Onchange juga harus mengatur email menggunakan setUserEmail di vEmail

0
AakashRajni 23 April 2021, 06:25