使用 React Native 提交数据后重置表单中的字段

Question

我正在尝试使用表单将用户添加到我的数据库中，但是在单击提交按钮后，我也想重置表单中的字段。

我正在设置这样的状态，并尝试在 onPress 道具上提交我的数据：

export default function Cadastro({}) {
  const [nome, setNome] = useState("");
  const [idade, setIdade] = useState("");
  const [email, setEmail] = useState("");
  const [estado, setEstado] = useState("");
  const [cidade, setCidade] = useState("");
  const [endereco, setEndereco] = useState("");
  const [telefone, setTelefone] = useState("");
  const [nome_usuario, setNome_usuario] = useState("");
  const [senha, setSenha] = useState("");
  const [confirmacao, setConfirmacao] = useState("");

  var newUser = {
    nome: nome,
    idade: idade,
    email: email,
    estado: estado,
    cidade_id: cidade,
    endereco: endereco,
    telefone: telefone,
    nome_usuario: nome_usuario,
    senha: senha,
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <FocusAwareStatusBar barStyle="light-content" backgroundColor="#88c9bf" />
      <ScrollView>
        <KeyboardAvoidingView style={styles.background}>
          <View style={styles.infobox}>
            <Text style={styles.infotext}>
              As informações preenchidas serão divulgadas apenas para a pessoa
              com a qual você realizar o processo de adoção e/ou apadrinhamento,
              após a formalização do processo.
            </Text>
          </View>

          <View style={styles.regform}>
            <Text style={styles.label}>INFORMAÇÕES PESSOAIS</Text>

            <TextInput
              style={[styles.textInput, { marginBottom: 36 }]}
              placeholder="Nome completo"
              autoCorrect={false}
              value={nome}
              onChangeText={setNome}
            />

            <TextInput
              style={[styles.textInput, { marginBottom: 36 }]}
              placeholder="Idade"
              autoCorrect={false}
              value={idade}
              onChangeText={setIdade}
            />

            <TextInput
              style={[styles.textInput, { marginBottom: 36 }]}
              placeholder="E-mail"
              autoCorrect={false}
              value={email}
              onChangeText={setEmail}
            />

            <TextInput
              style={[styles.textInput, { marginBottom: 36 }]}
              placeholder="Estado"
              autoCorrect={false}
              value={estado}
              onChangeText={setEstado}
            />

            <TextInput
              style={[styles.textInput, { marginBottom: 36 }]}
              placeholder="Cidade"
              autoCorrect={false}
              value={cidade}
              onChangeText={setCidade}
            />

            <TextInput
              style={[styles.textInput, { marginBottom: 36 }]}
              placeholder="Endereço"
              autoCorrect={false}
              value={endereco}
              onChangeText={setEndereco}
            />

            <TextInput
              style={styles.textInput}
              placeholder="Telefone"
              autoCorrect={false}
              value={telefone}
              onChangeText={setTelefone}
            />

            <Text style={styles.label}>INFORMAÇÕES DE PERFIL</Text>

            <TextInput
              style={[styles.textInput, { marginBottom: 36 }]}
              placeholder="Nome de usuário"
              autoCorrect={false}
              value={nome_usuario}
              onChangeText={setNome_usuario}
            />

            <TextInput
              style={[styles.textInput, { marginBottom: 36 }]}
              placeholder="Senha"
              autoCorrect={false}
              value={senha}
              onChangeText={setSenha}
            />

            <TextInput
              style={styles.textInput}
              placeholder="Confirmação de senha"
              autoCorrect={false}
              value={confirmacao}
              onChangeText={setConfirmacao}
            />

            <Text style={styles.label}>FOTO DE PERFIL</Text>

            <View style={styles.container}>
              <TouchableHighlight onPress={() => {}}>
                <View style={styles.button}>
                  <Image source={require("../../assets/controlpoint.png")} />
                  <Text style={{ color: "#757575" }}>adicionar fotos</Text>
                </View>
              </TouchableHighlight>
            </View>

            <View style={{ paddingTop: 32, paddingBottom: 24 }}>
              <SubmitButton
                text="FAZER CADASTRO"
                onPress={() => {
                  AddUsuario(newUser);
                }}
              />
            </View>
          </View>
        </KeyboardAvoidingView>
      </ScrollView>
    </SafeAreaView>
  );
}

我还尝试创建一个设置状态的函数，例如setNome('')，但随后出现“无效的挂钩调用”错误。

另外，除了我上面的方法之外，还有没有更好的方法来初始化多个状态？

感谢您的帮助！

Answer 1

因为您使用的是函数式组件，所以您可以按如下方式使用 Hooks。如果你有条件渲染你的代码检查 todoInput 是否在传递给 useEffect 的函数中定义。我假设你的状态变量在依赖列表中被称为 todoText。

import {useRef, useEffect} from 'react';


let AddTodo = ({ dispatch }) => {
    const todoInput = useRef();
    useEffect(()=>todoInput.current.clear(),[todoText]);

      return (
          <TextInput 
              ref={todoInput}
              onSubmitEditing = { e => { dispatch(addTodo(e.nativeEvent.text)) } } 
          />
      )
    }

Answer 2

为所有字段更改此项

"onChangeText={setNome}" 到 onChangeText={(text) => setNome(text)}

提交后清除值

const clearForm = () => {
    setName('');
    setIdade('');
    ......
}

<SubmitButton
   text="FAZER CADASTRO"
   onPress={() => {
    AddUsuario(newUser);
    clearForm();
   }}
/>