成功添加产品后如何清除ReactJs中的表单输入

问题描述

我想在提交表单后清除表单输入，但不能。我该怎么办

这是我的代码

.panel p {
  margin-top: 0;
  margin-bottom: 0;
}

这是我的setdefaultValue

const onHandleSubmit = (e) => {
    if (values.name.trim() === "") {
      setIsValid(false);
    }
    else {
      createProductRequest(values,imageAsFile);
    }
  };

这是我的表单按钮

const [values,setValues] = useState({
    image: "",name: "",price: 0,description: "",categoty: "",});

我的按钮是从另一个文件夹导入的，所以我已经这样做了

他们要求我必须将其设置为useEffect

<Button
    btnText="Submit"
    size="btn-md"
    onClick={onHandleSubmit}
    disabled={isValid}
 />

我喜欢这样

  useEffect(() => {
    if (type.CREATE_PRODUCT_SUCCESS) {
      fetchProductRequest();
    }
  },[fetchProductRequest,type]);

但这不起作用

我从react-bootstrap自定义表单

谢谢您的帮助。

解决方法

只需添加：

class ViewModel
{
  public ObservableCollection<MyModel> NICs { get; }

  public ViewModel()
  {
    this.NICs = new ObservableCollection<MyModel>();

    // Only show items where OperationalStatus == OperationalStatus.Up
    CollectionViewSource.GetDefaultView(this.NICs).Filter = 
      item => (item as MyModel).OperationalStatus == OperationalStatus.Up;
  }
}

<Window> <Window.DataContext> <ViewModel /> </Window.DataContext> <ComboBox ItemsSource="{Binding NICs}" /> </Window>之后的

like：

setValues({
    image: "",name: "",price: 0,description: "",categoty: "",})

最好不要从组件主体中调用请求，以避免存储中数据同步出现问题。为此，请使用诸如redux-thunk或redux-sagas之类的中间件。在其中，服务器成功响应后，调用方法清除输入：

const defaultValues = {
  image: "",}

setValues(defaultValues)

reactjs reactjs