如何在 React 中通過 post 請求提交輸入值？

Question

我正在嘗試在我的計划中發布開始日期、結束日期和來賓人數的請求。 開始日期和結束日期的發布請求有效。 但是，我在提交客人數量的輸入值時遇到問題。 我的客人人數值在控制台中返回為未定義。 很可能我在處理提交時犯了一個錯誤，但我不知道如何解決這個問題。 有人可以幫我解決這個問題嗎？

function Search() {
    const history = useHistory();
    const [startDate, setStartDate] = useState(new Date());
    const [endDate, setEndDate] = useState(new Date());

    const [numberOfGuests, setNumberOfGuests] = useState();
  
    const selectionRange = {
      startDate: startDate,
      endDate: endDate,
      key: "selection"
    };

    const handleSubmit = event => {
      setNumberOfGuests(event.numberOfGuests);
      event.preventDefault()
    }
  
    function handleSelect(ranges) {
      setStartDate(ranges.selection.startDate);
      setEndDate(ranges.selection.endDate);
    }

    const onSearch = useCallback(() => {
      console.log("startDate: ", startDate);
      console.log("endDate: ", endDate);
      console.log("numberOfGuests", numberOfGuests);
    
      axios
        .post(`/availableapartments`, {
          startDate,
          endDate,
          numberOfGuests
        })
        .then((res) => {
          console.log(res);
          console.log(res.data);
          history.push('/availableapartments')
        }); 

    }, [startDate, endDate, numberOfGuests]);
  
    return (
      <div className="datepickersearch">
        <DateRangePicker ranges={[selectionRange]} onChange={handleSelect} />
  
        <h2> Number of guests</h2>
        <input min={0} defaultValue={2} max={7} type="number" event={[numberOfGuests]} onChange={handleSubmit} />
        <Button onClick={onSearch}>Search Apartments</Button>
      </div>
    );
  }
  
  export default Search;
  

Answer 1

將您的 handlesubit 方法更改為

const handleSubmit = event => {
      setNumberOfGuests(event.target.value);
      event.preventDefault()
    }

您的事件event值包含在 target.value 中使用event.target.value訪問數據

Answer 2

input元素既不接受event也不接受defaultValue屬性，如代碼中所示，請參閱https://www.w3schools.com/tags/tag_input.asp以獲取參考React DOM堅持原生 DOM API。

在 React 中，您可以通過向 state 添加一個引用您的 state 的value屬性來控制您的輸入：

<input
  min={0}
  max={7}
  value={numberOfGuests}
  //  etc..
/>

此外，您需要添加一個更改處理程序才能修改 state：

<input
  value={numberOfGuests}
  onChange={handleNumberOfGuestChange}
/>

const handleNumberOfGuestChange = (event) => setNumberOfGuests(event.target.value);

你可能想閱讀官方文檔，它很好地解釋了這一點，並會為你提供開始使用 React 所需的一切https://reactjs.org/docs/forms.html#controlled-components