reactjs - 我想做一个表单组件。什么是内在属性?
问题描述
我想制作一个包含函数参数的表单组件。我试图将道具的功能用于组件。但发生了以下错误。我该如何解决这个错误?
打字稿错误。类型'{提交:(用户:字符串)=> void不可分配给类型'IntrinsicAttributes属性'提交'不存在类型IntrinsicAttributes&((用户:字符串,)=> void)。
但是,提交存在于表单组件上!
const UserForm = (
submit: (user: string) => void,
name: string,
) => {
const handleChange = (name: string) => (
event: React.ChangeEvent<HTMLInputElement>
) => {
setState({ ...state, [name]: event.target.checked });
};
const [state, setState] = React.useState({
isActive: false,
});
return (
<React.Fragment>
<TextField id="name" />
<FormGroup row>
<FormLabel component="legend">Student Type</FormLabel>
<FormControlLabel
control={
<Checkbox
checked={state.isActive}
onChange={handleChange("isActive")}
value="isActive"
/>
label="Active"
/>
</FormGroup>
<Button
color="primary"
onClick={() => {
submit(user);
//window.alert("confirm weather the name is correct.");
}}
>
Submit
</Button>
</React.Fragment>
);
};
{kind === "john" && (
<UserForm
submit={props.submitUser}
name={""}
/>
)}
export type nProps =
| {
userType: "john";
submitUser: (
user: string
) => void;
}
|
解决方案
如果您尝试创建一个反应功能组件,那么您的功能签名格式不正确。React 组件采用单个props
参数。
const UserForm = ({
submit: (user: string) => void,
name: string,
}) => { ... }
注意它们周围的花括号
如果对象解构看起来有点混乱,请考虑这个等效代码
const UserForm = props => {
const { submit, name } = props; // propTypes/shape defined externally
...
}
推荐阅读
- c# - 使用扩展方法复制数组
- python - 重命名 pandas 数据框中的一系列列(对编码来说真的很新,一个好心的白痴)
- java - 使用字符串和列表迭代地图
并替换为列表 - arrays - VB.NET 中的循环优化
- c++ - 四舍五入到不均匀间隔的整数
- intellij-idea - 如何在 Intellij IDEA 中从 Run 中删除/隐藏标志
- php - 启用 Symfony 注释实际上有什么作用?
- java - HashMap put 方法中的 java.lang.NullPointerException
- python - 制作需要删除列表元素的循环脚本
- python - 如何导入 cv2