如果输入值为空，则显示功能组件

Question

我正在使用 rsuite 中的 DateRangePicker，但我注意到它没有必需的属性。这允许用户输入空白日期，我希望防止这种情况发生。这是我的代码：

function App() {
const [value, setValue] = useState('');
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const [data, setData] = useState({});

   const dateOnChange = (date) => {
    const startDate = date[0];
    const startDateString = format(startDate, 'yyyy-MM-dd');
    console.log('Start Date:', startDateString);
    setStartDate(startDateString);
    const endDate = date[1];
    const endDateString = format(endDate, 'yyyy-MM-dd');
    console.log('End Date:', endDateString);
    setEndDate(endDateString);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    const dataSubmit = { value, startDate, endDate };
    fetch('/table', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify(dataSubmit),
    })
      .then((res) => res.json())
      .then((data) => {
        setData(data);
      });
  };


    
      return (
              <div className='App'>
                  <DateRangePicker
                    appearance='default'
                    placeholder='Select Date Range'
                    onOk={dateOnChange}
                    format='yyyy-MM-dd'
                    className='sans-fonts-all'
                  />

                  <Form onSubmit={handleSubmit} className='sans-fonts-all'>
                    <InputGroup className='w-50'>
                      <Form.Control
                        type='text'
                        required
                        onChange={(e) => setValue(e.target.value)}
                      />
                      <Button type='submit' className='sans-fonts-all'>
                        Get Info
                      </Button>
                    </InputGroup>
                  </Form>


    </div>
    );
}export default App;

我希望在按下按钮时在 handleSubmit 函数的开头添加一个 if 语句。如果日期为空，那么我想呈现一个警告，告诉用户需要一个日期。如果日期已过，那么它将命中语句的我的其他部分并向我的后端发出请求。我是 React 的新手并且一直在网上寻找，但我不确定他们最好的方法是什么。非常感谢任何指导。

Answer 1

您可以有一个错误状态，当验证失败时，将错误状态设置为 true 并呈现错误组件。

const [error, setError] = useState(false);

const handleSubmit = (e) => {
    /* Some code here */
    if(!startDate || !endDate) {
      setError(true)
    } else {
      setError(false);
      /* Make API call */
    }
}

return (
  /* Some JSX */
  {error && <ErrorToast />}
)

如果输入值为空，则显示功能组件

display functional component if input value is empty

reactjs

react-hooks

react-functional-component