reactjs - 将 Class 组件转换为 handleChange Hook
问题描述
我想将此类组件转换为handleChange
在函数组件中工作的事件。我不完全确定这是可能的,它可能必须是一个钩子。我不能完全正确地理解语法。
class CheckboxForm extends Component {
constructor(props) {
super(props);
this.state = { value: [] };
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
const input = event.target.value;
this.setState(
{
value: this.state.value.includes(input)
? this.state.value.filter((item) => item !== input)
: [...this.state.value, input],
},
() => {
console.log("CheckBox: ", this.state.value);
}
);
}
我的尝试:
export const CheckboxHook = (props) => {
const [value, setValue] = useState([]);
const handleCheckbox = (event) => {
const input = event.target.value;
setValue(
value.include(input)
? value.filter((item) => item !== input)
: [value, input],
() => {
console.log("Checkbox: ", value);
}
);
};
};
解决方案
好像你正在尝试做这样的事情?您不需要任何自定义挂钩 - 只需useState
和useEffect
.
const CheckboxForm = (props) => {
const [checkedItems, setCheckedItems] = useState([]);
useEffect(() => {
// equivalent to passing a callback to `this.setState` in class component
console.log("Checked: ", checkedItems);
}, [checkedItems])
const handleCheckbox = (event) => {
const { value } = event.target;
// setting with hooks must use a callback
// if you need access to the previous value
setCheckedItems(items =>
items.includes(value)
? items.filter(item => item !== value)
: [...items, value]
);
};
return <form>
<label>a <input value="a" type="checkbox" onChange={handleCheckbox} /></label>
<label>b <input value="b" type="checkbox" onChange={handleCheckbox} /></label>
<label>c <input value="c" type="checkbox" onChange={handleCheckbox} /></label>
</form>
};
推荐阅读
- c++ - snprintf 的交叉编译版本在字符串缓冲区中分配适量的内存
- python-3.x - 在不知道键名的情况下从复杂的字典列表中删除键
- java - 以模块化实现方式更换开关
- javascript - Angular Material - 比较和迭代两个数据源
- excel - 如何使用 VBA 在 Excel 中查找特定列并复制粘贴相应的列
- flutter - ListView 中单元格之间出现意外的水平线
- sql - 如何获取 Table_A 中具有 X 引用数的 Table_B 中的条目计数
- vue.js - vue-router中的scrollBehavior,返回循环数据的位置
- android - 为什么 LiveData 观察者返回以前的数据
- php - 如何显示批准或拒绝的休假状态?