输入反应包装器答案

【问题标题】：Input react wrapper输入反应包装器
【发布时间】：2021-03-11 13:43:00
【问题描述】：

我想为用户数据制作一个表单，我被要求为每种类型的输入制作一个包装反应组件。我的问题是将处理程序传递给输入组件。

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>
    )
}

所以我不知道如何将事件处理程序传递给输入组件，因为它现在找不到它。

【问题讨论】：

标签： reactjs forms react-component

【解决方案1】：

它应该以 handleChange 的形式存在于 Textbox 的 props 中，因为它是在父组件中传递的。这不行吗？

<input
  type={props.type}
  name={props.name} 
  value={props.value} 
  onChange={(event) => props.handleChange(event)}                 
/>

【讨论】：