React-select在输入时不提交表单

import React, { useState } from 'react';
import Select from 'react-select';

const MyForm = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  const handleChange = (option) => {
    setSelectedOption(option);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // 处理表单提交逻辑
    console.log(selectedOption);
  };

  return (
    <form onSubmit={handleSubmit}>
      <Select
        onChange={handleChange}
        options={...}
      />
      <button type="submit">提交</button>
    </form>
  );
};

export default MyForm;

import React, { useRef } from 'react';
import Select from 'react-select';

const MyForm = () => {
  const selectRef = useRef(null);

  const handleInputChange = (inputValue) => {
    // 处理输入内容
    console.log(inputValue);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // 处理表单提交逻辑
    console.log(selectRef.current.state.inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <Select
        onInputChange={handleInputChange}
        options={...}
        ref={selectRef}
      />
      <button type="submit">提交</button>
    </form>
  );
};

export default MyForm;