react native如何改变TextInput的值

Question

如何编辑文本输入？ 我已经从数据库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>
)

更新这是我使用 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);
        };
      })
    }

Answer 1

当您在这里使用 Formik 时，您不必在此处为 email 维护组件级别 state。

你可以像下面这样使用Formik的state并且可以在使用handleSubmit时得到，示例代码如下

<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>

您可以使用从数据库（或 API）中检索到的 email 地址，而不是初始值的硬编码值

您可以查看以下演示https://snack.expo.io/@guruparan/d05b51

Answer 2

您正在将 static 值传递给 textInput。 它应该是动态的

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 应包含从数据库中获取的 email 地址。 Onchange 还应该在 vEmail 中使用 setUserEmail 设置 email

Answer 3

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存在于该组件上。 因此，您应该在更改TextInput时更新此组件本身中的 state 。

你的onChangeText应该看起来像这样

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

在这两种方式中，您都将在handleChange中获取文本值作为参数，但您使用的是来自UserData.Email的 TextInput 的值。 因此，您应该在handleChange中更新该字段，这意味着您的handleChange应该只存在于该组件中。

希望你明白我的意思。