如何在 React 中通过 post 请求提交输入值？

编程问答 2022-06-02

问题描述

我正在尝试发布请求的开始日期、结束日期和我的计划中的客人数量。开始日期和结束日期的发布请求有效。但是，我在提交客人数量的输入值时遇到问题。我的客人数量值在控制台中返回为未定义。 很可能我在提交句柄时犯了一个错误，但我不知道如何解决这个问题。有人可以帮我解决这个问题吗？

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,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;

解决方法

将您的 handlesubit 方法更改为

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

您的事件 event 值包含在 target.value 内 使用 event.target.value 访问数据

,

input 元素既不接受您的代码中看到的 event 也不接受 defaultValue 属性，请参阅 https://www.w3schools.com/tags/tag_input.asp 以获取参考 React DOM 坚持使用原生 DOM API。

在 React 中，您可以让状态控制您的输入，方法是向其添加一个 value 属性，该属性指的是您的状态：

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

此外，您需要添加一个更改处理程序才能修改状态：

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

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

您可能想阅读官方文档，它很好地解释了这一点，并且会为您提供开始使用 React 所需的一切https://reactjs.org/docs/forms.html#controlled-components

axioshandleinputreactjsreactjsrestapi