javascript - 满足onChange时执行两个函数编译失败
问题描述
Expected an assignment or function call and instead saw an expression
我在设计两个日期输入的功能时遇到了这个错误。
const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState('');
const validDates = function() {
//Get the text in the elements
var from = document.getElementsByName('startDate').textContent;
var to = document.getElementsByName('endDate').textContent;
//Generate an array where the first element is the year, second is month and third is day
var splitFrom = from.split('/');
var splitTo = to.split('/');
//Create a date object from the arrays
var fromDate = Date.parse(splitFrom[0], splitFrom[1] - 1, splitFrom[2]);
var toDate = Date.parse(splitTo[0], splitTo[1] - 1, splitTo[2]);
if(fromDate < toDate) {
document.getElementById('notice').innerHTML = "";
document.getElementById('notice').style.display = 'none';
}
else {
document.getElementById('notice').innerHTML = "The End Date is supposed to be later than the Start Date!";
document.getElementById('notice').innerHTML = '';
}
};
return (
<input type="date" name="startDate" defaultValue={experienceToEdit.start_date} onChange={e => {setStartDate(e.target.value); validDates}} value={startDate}></input>
<input type="date" name="endDate" defaultValue={experienceToEdit.end_date} onChange={e => {setEndDate(e.target.value); validDates}} value={endDate}></input>
<p id="notice"></p>
)
错误发生在onChange
输入块的功能中。我要做的是确保第二个输入块的结果晚于第一个。
解决方案
OnChange 需要回调,您正在传递这样的回调onChange={e => {setStartDate(e.target.value); validDates}}
让我们以另一种方式编写您提供的 onChange 函数
function a(e){
setStartDate(e.target.value);
validDates
}
这样你就可以清楚地看到你的代码有什么问题,validDates 没有被执行并且 react 会抛出一个错误
推荐阅读
- angular - 如何在 paperbits 中使用 Angular 组件
- python - 如何在没有输入和输出信息的情况下修复三个测试用例错误?
- jquery - jquery如何使用find()来查找脚本标签内的变量?
- flutter - Flutter (web) video_player 自动播放
- java - 扩展类中的方法方面不起作用
- angular - Error during template compile of 'AppRoutingModule' Function expressions are not supported in decorators
- javascript - 未捕获的类型错误:allClearButton.addEventListener 不是函数
- snowflake-cloud-data-platform - 雪花枢轴属性值到对象数组中的列中
- postgresql - 如何在rails中索引已经创建的数据?
- android - 连接丢失后RSocket恢复会话/流