如何在react native中提交表单并提交到post API

0md85ypi  于 2022-12-14  发布在  React
关注(0)|答案(4)|浏览(157)

我想将所有输入字段的值保存到getdata(),但得到的值未定义

export default function Signupfor(props) {
  // const phoneInput = useRef < PhoneInput > null;
  const [text, setTextname] = useState();
  function getdata() {
    console.log('dsd');
    console.log(text);
  }

  const {userInfo, log} = props?.route?.params;
  console.log(log.name);
  return (
    <View style={styles.prheight}>
      <View style={styles.form}>
        <Text style={styles.r}>One Last Step</Text>
        <TextInput
          style={styles.forminput}
          label="Name"
          value={userInfo.user.name}
          onChangeText={text => setTextname(text)}
        />
        <TextInput
          style={styles.forminput}
          label="Email"
          value={userInfo.user.email}
          onChangeText={text => setTextemail(text)}
        />

        <TextInput
          style={styles.forminput}
          label="Whatsapp Number"
          keyboardType="numeric"
          value={userInfo.user.number}
          onChangeText={text => setTextnumber(text)}
          // value={this.state.myNumber}
          maxLength={10} //setting limit of input
        />
       
      </View>
      <View style={styles.buttonw}>
        <Button color="#7743DB" title="Lets Go" onPress={() => getdata()} />
      </View>
    </View>
  );
}

这里,nameemail应该是不能编辑的。

vi4fp9gy

vi4fp9gy1#

您可以使用formik包在react native中制作表单

安装

yarn add formik

用法

import { Formik } from "formik";

export default function Signupfor(props) {

  const { userInfo, log } = props?.route?.params;
  console.log(log.name);
  return (
    <Formik
      initialValues={{
        name: userInfo.user.name,
        email: userInfo.user.email,
        number: userInfo.user.number,
      }}
      onSubmit={async (values, actions) => {
        try {
           console.log("name", values.name);
          console.log("phone", values.number);
          
          const params = {
            full_name: values.name,
            email: values.email,
            phone_number: values.number,
          };

         
        } catch (error) {
          let message = error.message;
          console.log(message)
        } finally {
          actions.setSubmitting(false);
        }
      }}
    >
      {({
        handleChange,
        setFieldValue,
        handleSubmit,
        values,
        errors,
        touched,
        isSubmitting,
      }) => (
        <View style={styles.prheight}>
          <View style={styles.form}>
            <Text style={styles.r}>One Last Step</Text>
            <TextInput
              style={styles.forminput}
              label="Name"
              value={values.name}
              onChangeText={handleChange("name")}
            />
            <TextInput
              style={styles.forminput}
              label="Email"
              value={values.email}
              onChangeText={handleChange("email")}
            />

            <TextInput
              style={styles.forminput}
              label="Whatsapp Number"
              keyboardType="numeric"
              value={values.number}
              onChangeText={handleChange("number")}
              // value={this.state.myNumber}
              maxLength={10} //setting limit of input
            />
          </View>
          <View style={styles.buttonw}>
            <Button
              color="#7743DB"
              title="Lets Go"
              onPress={() => handleSubmit()}
            />
          </View>
        </View>
      )}
    </Formik>
  );
}
yzckvree

yzckvree2#

除非编辑文本输入字段,否则原始方法不会填充状态,这是因为initialState没有起始值。因此,如果字段没有更改,则触发getData()将阅读空状态。
onChangeText={text => setTextname(text)}仅在编辑textInput字段时触发。
另外,我认为您可能丢失了一些 prop ,因此首先检查您是否通过记录从props获得了正确的数据。
确认 prop 可用后。
将名称的initialState设置为userInfo.user.name

const { userInfo } = props?.route?.params;
const [name, setName] = useState(userInfo.user.name);

然后将状态name传递给TextInput,它应该通过从状态中阅读来填充值。

return (
  <>
    <TextInput
      placeholder="name"
      value={name}
      onChangeText={(text) => setName(text)}
    />
    <Button title="Submit" onPress={() => getData()} />
  </>
)

确保为要保存的任何其他值创建状态。

const [name, setName] = useState(userInfo.user.name);
const [email, setEmail] = useState(userInfo.user.email);
55ooxyrt

55ooxyrt3#

你可以这样做!!

export default function Signupfor(props) {
const {userInfo, log} = props?.route?.params;
  const [name, setName] = useState(userInfo?.user?.name);
  const [phone, setPhone] = useState(userInfo?.user?.number);

  function getdata() {
    console.log("name",name)
    console.log("phone",phone)
  }
     
  return (
    <View style={styles.prheight}>
      <View style={styles.form}>
        <Text style={styles.r}>One Last Step</Text>
        <TextInput
          style={styles.forminput}
          label="Name"
         // this value must be same with useState
          value={name}
          onChangeText={text => setName(text)}
        />    
        <TextInput
           style={styles.forminput}
           label="Mobile"
           value={phone}
           onChangeText={text => setPhone(text)}
         />      
      </View>
      <View style={styles.buttonw}>
        <Button color="#7743DB" title="Lets Go" onPress={() => getdata()} />
      </View>
    </View>
  );
}

email也是如此。

pieyvz9o

pieyvz9o4#

您可以使用https://react-hook-form.com之类的库来检查react native on video的示例。或者您也可以自己校正它,在下面的示例中,任何时候您需要访问输入值时,都可以从textnumber中读取它

const UselessTextInput = () => {
  const [text, onChangeText] = useState("Useless Text");
  const [number, onChangeNumber] = useState(null);

  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
      />
      <TextInput
        style={styles.input}
        onChangeText={onChangeNumber}
        value={number}
        placeholder="useless placeholder"
        keyboardType="numeric"
      />
    </SafeAreaView>
  );
};

相关问题