如何解决如何在 React 中通过 post 请求提交输入值?
我正在尝试发布请求的开始日期、结束日期和我的计划中的客人数量。开始日期和结束日期的发布请求有效。但是,我在提交客人数量的输入值时遇到问题。我的客人数量值在控制台中返回为未定义。 很可能我在提交句柄时犯了一个错误,但我不知道如何解决这个问题。有人可以帮我解决这个问题吗?
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。