reactjs - 带有 React 钩子的简单表单
问题描述
这很简单,我正在尝试将表单的输入添加到状态,但它不起作用。有人可以指出我做错了什么吗?
沙盒:https ://codesandbox.io/s/unruffled-pine-64pxe?file=/src/App.js
import React, { useState } from 'react';
import './App.css';
function App() {
return (
<div>
<Field />
</div>
);
}
function Field(){
const [toDoItem, setToDoItem] = useState("");
console.log(toDoItem)
const addToDoItem = (event) => {
setToDoItem(event.target.value)
}
return (
<form >
<input type="text" value={toDoItem} onChange={addToDoItem}/>
<input type="submit" value="Add" />
</form>
);
}
export default App;
解决方案
handleSubmit(event) {
console.log('Form submitted: ' + toDoItem);
}
模板:-
<form onSubmit={this.handleSubmit}>
<input type="text" value={toDoItem} onChange={addToDoItem}/>
<input type="submit" value="Add" />
</form>
推荐阅读
- python - Python 中的 Pythonic 用法或下划线(私有)名称
- python - 当第一个到达带有文本的边框时,如何跳到 MDTextField 的下一行。KivyMD
- javascript - 如何在 PHP 调用中使用 Javascript 变量
- php - Wordpress 嗅探所有请求
- r - 给定具有特定特殊字符的字符串时,iconv() 返回 NA
- javascript - MongoError:E11000 重复键错误集合,当文档不包含索引字段时发生
- regex - 多行上的 sed 正则表达式无法捕获所有
- google-apps-script - 每 15 分钟在准确时间触发 GAS
- javascript - 我正在尝试编写代码来检查给定项目是否存在于数组中,如果不存在则将变量设置为 true 或 false
- c - 如何在运行“cmake install”时要求 CMake 复制包含目录?