ReactJS onChange 函数在输入时不触发

Question

我已经用 React 钩子和 useState 重构了一个表单，但我无法触发提供给输入标签的函数句柄更改。这是代码： 使用状态方法

const [data, setData] = useState({
newDate: '',
startTime: '',
endTime: '',
});
const { newDate, startTime, endTime } = data;

句柄输入更改方法

const handleInputChange = (e) => {
console.log('Inside handleChange');
setData({ ...data, [e.target.name]: e.target.value });
};

表单中的输入

<input type="text" name="newDate" value={newDate} className="datepicker"
placeholder="Meeting Date" onChange={handleInputChange} />
<input style={{ width: '40%', marginRight: '10%' }} type="text" required
name="startTime" value={startTime} placeholder="00:00" onChange={handleInputChange}
className="timepicker" placeholder="Start Time" />

onSubmit 方法和除此之外的所有内容都在工作，但输入 onChange 方法没有触发。我到底在这里做错了什么，我该如何解决？

Answer 1

就我而言，是全局处理程序附加到window，e.preventDefault()阻止了onChange。

因此，如果您带着非工作onChange处理程序来到这里 - 您可能需要检查是否有任何处理程序。

Answer 2

代码似乎没问题，您正在使用受控组件以及计算的属性名称来动态更新每个输入值。也许某处有错别字？另外，我会仔细检查handleInputChange是否在主函数组件内。

基于您的代码的工作示例：

function App() {
const [data, setData] = React.useState({
newDate: "",
startTime: "",
endTime: ""
});
const handleInputChange = e => {
setData({ ...data, [e.target.name]: e.target.value });
};
const { newDate, startTime, endTime } = data;
return (
<div>
<input
style={styles.input}
type="date"
name="newDate"
value={newDate}
className="datepicker"
onChange={handleInputChange}
/>
<input
style={styles.input}
type="time"
required
name="startTime"
value={startTime}
onChange={handleInputChange}
className="timepicker"
/>
<input
style={styles.input}
type="time"
required
name="endTime"
value={endTime}
onChange={handleInputChange}
className="timepicker"
/>
{JSON.stringify(data)}
</div>
);
}
const styles = {
input: {
margin: "20px auto",
width: "40%",
display: "block",
}
};
ReactDOM.render(<App/>, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

注意：我根据您正在收集的数据添加了特定的<input>类型。

Answer 3

<input type="text" name="newDate" value={newDate} className="datepicker"
placeholder="Meeting Date" onChange={(e) => handleInputChange(e)} />

奇怪，试试这个。