在我的案例中，单击submit后，如何清除react中的输入字段？

在React中清除输入字段的方法有多种，以下是其中几种常见的方法：

使用受控组件：在React中，可以通过将输入字段的值绑定到组件的状态中，然后在提交后将状态重置为初始值来清除输入字段。例如，可以在组件的构造函数中初始化一个空的状态对象，然后将输入字段的值绑定到该状态对象中。在提交后，可以通过调用setState方法将状态重置为空对象来清除输入字段。

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  handleChange = (event) => {
    this.setState({ inputValue: event.target.value });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    // 处理表单提交逻辑
    // 清除输入字段
    this.setState({ inputValue: '' });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.inputValue} onChange={this.handleChange} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

使用非受控组件：另一种方法是使用非受控组件，通过使用ref来获取输入字段的引用，然后在提交后通过修改输入字段的值来清除它。例如，可以在组件中创建一个ref，并将其绑定到输入字段上。在提交后，可以通过将输入字段的值设置为空字符串来清除它。

class MyForm extends React.Component {
  inputRef = React.createRef();

  handleSubmit = (event) => {
    event.preventDefault();
    // 处理表单提交逻辑
    // 清除输入字段
    this.inputRef.current.value = '';
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={this.inputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

使用受控组件库：除了手动处理输入字段的清除，还可以使用一些受控组件库来简化这个过程。这些库提供了一些现成的组件，可以自动处理输入字段的状态和清除。例如，可以使用react-hook-form库中的Controller组件来处理输入字段的状态和清除。

import { useForm, Controller } from 'react-hook-form';

function MyForm() {
  const { handleSubmit, control, reset } = useForm();

  const onSubmit = (data) => {
    // 处理表单提交逻辑
    // 清除输入字段
    reset();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="inputValue"
        control={control}
        defaultValue=""
        render={({ field }) => <input type="text" {...field} />}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

以上是几种常见的清除React中输入字段的方法，具体选择哪种方法取决于个人偏好和项目需求。