reactjs - 如何在 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, 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;
解决方案
输入元素既不接受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
推荐阅读
- json - 获取 JSON 时呈现多个 TextInput - React Native
- nativescript - Nativscript 平台特定模板不起作用
- sql - GROUP BY - 内联视图和未连接的表
- javascript - Jwt 无法解析,Okta
- html - 在不使用JS的情况下将文本的最小高度设置为最大文本的高度
- c++ - C ++中的“预期语句”是什么意思
- python - 一系列彩色球的排列,没有两个相同颜色的球相邻?
- java - 对 Java 继承规则感到困惑
- r - 如何在 R 中对多个 ROC 图进行垂直平均?
- php - Laravel 的 Twilio API