将 ReactJS 中的函数作为组件的道具传递

Question

I am a beginner to using ReactJS and I created a component like this:

function InputField(props){
    return <div>
        <label htmlFor={props.Id}>{props.label}</label>
        <input type={props.type} id={props.Id} value={props.value} 
        onChange={props.changeFunc} />
    </div>
}

After rendering the component I wasn't able to enter text inside the input box. The state was not being updated for the hook I had created.

You can imagine that I have passed props to the component something like this

<InputField Id='user_email' label='Email' type='email' 
value={values.email} changeFunc={handleChange}/>

And my implementation of handleChange function

const handleChange = (event)=>{
        const {name,value} = event.target
        setValues((prevValues)=>{
            return {...prevValues,[name]:value}
        })
}

Update : Thank you everyone for pointing out that I had missed to add the name property to the input field.

Answer 1

You are missing the name property in the input field

function InputField(props){
    return <div>
        <label htmlFor={props.Id}>{props.label}</label>
        <input name = {props.name} type={props.type} id={props.Id} value={props.value} 
        onChange={props.changeFunc} />
    </div>
}

<InputField Id='user_email' label='Email' type='email' 
value={values.email} changeFunc={handleChange} name="email" />

Answer 2

i think in handleChange event does not have name because you haven't set a name attribute for your input element

so i think you should just set name attribute:

<input
   id={props.Id}
   name="input-field-name"
   type={props.type}
   value={props.value} 
   onChange={props.changeFunc}
/>