reactjs - 输入反应包装器
问题描述
我想为用户数据制作一个表单,并被要求为每种类型的输入制作一个包装器反应组件。我的问题是将处理程序传递给输入组件。
This is my form:
import React from 'react';
import {addUser as addNewUser} from '../../services/index';
import {TextBox} from './TextBox'
interface AddUserProps{
}
interface AddUserState{
UserName:string,
}
export default class AddUser extends React.Component<AddUserProps, AddUserState> {
constructor(props:any) {
super(props);
this.state = {
UserName: '',
};
this.updateUserName = this.updateUserName.bind(this);
}
updateUserName(event: React.ChangeEvent<HTMLInputElement>) {
this.setState({UserName: event.target.value});
}
handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
console.log(this.state)
addNewUser(this.state)
}
render() {
return (
<div>
<form
className = "user-add-form"
onSubmit={(event) => this.handleSubmit(event)}
>
<h3>Adauga utilizatori:</h3>
<label htmlFor="userName">User Name:</label>
<TextBox name="userName" type="text" value={userName} handleChange={this.updateUserName}/>
<input type="submit" value="Add user"/>
</form>
</div>
)
}
}
export {AddUser};
这是我制作的输入组件:
import React from 'react'
export function TextBox(props) {
return (
<div>
<input type={props.type}
name={props.name}
value={props.value}
onChange={(event) => props.HandleInput(event)}
/>
</div>
)
}
所以我不知道如何将事件处理程序传递给输入组件,因为它现在找不到它。
解决方案
它应该存在于 Textbox 的 props 中,handleChange
因为它是在父组件中传递的。这不起作用吗?
<input
type={props.type}
name={props.name}
value={props.value}
onChange={(event) => props.handleChange(event)}
/>
推荐阅读
- git - 如何初始化,添加现有远程,然后在 Git 中推送新分支?
- c - 如何在一行中读取 C 中的多个字符串,每个字符串都包含空格?
- r - 创建列表时出现意外的符号错误
- scala - Spring Boot 2.2.4 升级后报错:scala error: "java.lang.NoSuchMethodError: scala.Predef$.refArrayOps([Ljava/lang/Object;)[Ljava/lang/Object;"
- java - 如何使用 Junit 和 Mockito 使用 Spring 存储库测试 void 方法
- excel - Excel:“无法加载指定的 XML 或架构源”
- angular - 从网络服务器调用时,Angular 没有缓存 localhost api url
- c# - 是否可以获得 Azure 资源类型的所有可用指标?
- android - 以较小的尺寸显示模拟器窗口
- haskell - 我可以在单子上使用地图吗?