значение формы сброса реагирующего материала

Я использую реагирующий материал с крючками, я хочу выполнить сброс формы материала.

Я пытался установить состояние, но никакие изменения не отражают

<form className="create-account-form" autoComplete="off" onSubmit={onSubmit}>
  <FormControl
    error={!!errorText.first_name}
    variant="outlined"
    size="small"
    fullWidth
  >
    <InputLabel>First Name</InputLabel>
    <OutlinedInput
      name="first_name"
      className="create-account-input"
      labelWidth={90}
      disabled={loading}
      onChange={event => handleChange("first_name", event)}
    />
  </FormControl>
  <Button
    type="submit"
    className="submit-button"
    color="primary"
    variant="contained"
  >
    Submit
  </Button>
</form>;
//my state varibles

const [signUpData, setSignUpData] = useState({
  first_name: ""
});
const handleChange = (field, event) => {
  if (event) {
    setSignUpData({
      ...signUpData,
      [field]: event.target ? event.target.value : event
    });
  }
};

при отправке я хочу очистить эти данные в поле ввода.

const onSubmit = e => {
  e.preventDefault();
   setSignUpData((prev) => (prev.first_name = "",));

  // clearfunction()
};

reactjs javascript react-material
person akash kumar    schedule 09.03.2020    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Загрузить начальное состояние

const init = {first_name: ''};
const [signUpData, setSignUpData] = useState(init)

const onSubmit = (e) => {
  e.preventDefault();
  // do submit logic
  setSignUpData(init)
}
person Joe Lloyd    schedule 09.03.2020
comment
Я также установил состояние пустым, но никакие изменения не отражают - person akash kumar; 09.03.2020

arrow_upward
0
arrow_downward

сделать объект для сброса или начальное значение, установленное как

const initial_value={

first_name:""}

затем setSignUpData(...initial_value); потому что у вас есть один вход, который использовал эту форму или setSignUpData(initial_value);

person Mohammed_Alreai    schedule 09.03.2020

arrow_upward
0
arrow_downward

Видите ли, вы на самом деле не связали переменную состояния с полем ввода.

<OutlinedInput
      name="first_name"
      className="create-account-input"
      labelWidth={90}
      disabled={loading}
      onChange={event => handleChange("first_name", event)}

      //add this
      value={signUpData.first_name}

    />
person Barun Patro    schedule 09.03.2020