无法在其他表单域上输入

Question

我正在使用反应。我想知道为什么我只能编辑表单的名字部分，而其他输入字段不允许我输入任何内容。

这是我的代码：

import React, {useContext, useState, useEffect} from 'react';
import{GlobalContext} from '../context/GlobalState';
import {Link, useHistory} from 'react-router-dom';

import {Form,FormGroup,Label,Input,Button} from 'reactstrap';

export const EditUser = (props) => {

const {users,editEmployee } = useContext(GlobalContext);
const [selectedUser, setSelectedUser] = useState({
    id:'',
    name:'',
    nameL:'',
    email:'',
    contact:'',
    address:'',
    date:'',
   
});
const history= useHistory();
const currentUserId = props.match.params.id;
useEffect(() =>{
    const userId =(currentUserId);
    const selectedUser =users.find(user=>user.id === userId)
    setSelectedUser(selectedUser)
}, [currentUserId,users])


const onChange = (e) =>{
    setSelectedUser({...selectedUser, [e.target.name]: e.target.value})

}
const onNameL = (e) =>{
    setSelectedUser({...selectedUser, [e.target.nameL]: e.target.value})

}
const onEmail = (e) =>{
    setSelectedUser({...selectedUser, [e.target.email]: e.target.value})

}
const onContact = (e) =>{
    setSelectedUser({...selectedUser, [e.target.contact]: e.target.value})

}
const onAddress = (e) =>{
    setSelectedUser({...selectedUser, [e.target.address]: e.target.value})

}
const onDate = (e) =>{
    setSelectedUser({...selectedUser, [e.target.date]: e.target.value})

}
const onSubmit= () =>{

    editEmployee(selectedUser)
  
    history.push('/');

}


return (
    <React.Fragment>
        <Form onSubmit={onSubmit}>
            <FormGroup>
                <Label>FirstName</Label>
                <Input type="text" name="name" value={selectedUser.name} onChange={onChange} placeholder="enter first name"></Input>
                <Label>Last Name:</Label>
                <Input type="text" name="nameL" value= {selectedUser.nameL}  onChange={onNameL} placeholder="enter your Last name"></Input>
                <Label>Email:</Label>
                <Input type="email" name="email" value= {selectedUser.email}  onChange={onEmail} placeholder="Email Address"></Input>
                <Label>Contact Number:</Label>
                <Input type="number" name="contact" value= {selectedUser.contact}  onChange={onContact} placeholder="Contact"></Input>
                <Label>Address:</Label>
                <Input type="text"name="address" value= {selectedUser.address}  onChange={onAddress} placeholder="enter your Address"></Input>
                <Label>Date</Label>
                <Input type="date" name="date" value= {selectedUser.date}  onChange={onDate} placeholder="enter date employed"></Input>
            </FormGroup>
            <Button type="submit" className="btn btn-info">Edit </Button>
            <Link to="/" className="btn btn-danger">Cancel</Link>
        </Form>
    </React.Fragment>
)
}
export default EditUser;

Answer 1

欢迎来到 Stack Overflow 社区！！！

您可以像这样以非常优化的方式使用更少的代码行来做到这一点。它将修复您的错误并使其更易于调试。试试这个。

// necessary imports 

export const EditUser = (props) => {
 const [selectedUser, setSelectedUser] = useState({
    id: "",
    name: "",
    nameL: "",
    email: "",
    contact: "",
    address: "",
    date: "",
  });

  const onChange = (e) => {
    const property = e.target.name;
    const value = e.target.value;

    setSelectedUser({
      ...selectedUser,
      [property]: value,
    });
  }; // Just have only one event for all form elements.

  return (
    <React.Fragment>
      <Form>
        <FormGroup>
          <Label>FirstName</Label>
          <Input
            type="text"
            name="name"
            value={selectedUser.name}
            onChange={onChange}
            placeholder="enter first name"
          ></Input>
          <Label>Last Name:</Label>
          <Input
            type="text"
            name="nameL"
            value={selectedUser.nameL}
            onChange={onChange}
            placeholder="enter your Last name"
          ></Input>
          <Label>Email:</Label>
          <Input
            type="email"
            name="email"
            value={selectedUser.email}
            onChange={onChange}
            placeholder="Email Address"
          ></Input>
          <Label>Contact Number:</Label>
          <Input
            type="number"
            name="contact"
            value={selectedUser.contact}
            onChange={onChange}
            placeholder="Contact"
          ></Input>
          <Label>Address:</Label>
          <Input
            type="text"
            name="address"
            value={selectedUser.address}
            onChange={onChange}
            placeholder="enter your Address"
          ></Input>
          <Label>Date</Label>
          <Input
            type="date"
            name="date"
            value={selectedUser.date}
            onChange={onChange}
            placeholder="enter date employed"
          ></Input>
        </FormGroup>
        <Button type="submit" className="btn btn-info">
          Edit{" "}
        </Button>
      </Form>
    </React.Fragment>
  );
}

如果您需要进一步的支持，请告诉我。

Answer 2

在所有用于控制表单字段的函数中，使用以下代码：

setSelectedUser({...selectedUser, [e.target.name]: e.target.value})

此外，对于当前的实现，您可以只使用一个函数，即 onChange。使用多个函数是没有用的。