满足 onChange 时执行两个函数时编译失败

时间:2021-06-23 02:30:23

标签: javascript reactjs frontend

我在设计两个日期输入的功能时遇到了这个错误 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 功能中。我要做的是确保第二个输入块的结果晚于第一个。

1 个答案:

答案 0 :(得分:1)

OnChange 需要回调,您正在传递这样的回调 onChange={e => {setStartDate(e.target.value); validDates}}

让我们用另一种方式编写你给 onChange 的函数

function a(e){
   setStartDate(e.target.value);
   validDates
}

这样你就可以清楚地看到你的代码有什么问题,validDates 没有被执行,react 会给你一个错误

相关问题