reactjs - TextField 输入文本的设置值变得不可编辑

问题描述

我正在创建一个用于从 mongodb 更新数据的表单我能够获取数据并添加 onchange 如果 currentId 存在则所有数据都将填充到表单中但是，我的问题是我无法编辑或无法在输入中键入任何内容编辑值。我真的需要你的眼睛看到错过或错过的东西。提前谢谢大家。

配置文件容器

import React, { useState, useEffect }  from 'react';

import { useDispatch, useSelector } from 'react-redux';
import { getProfile } from '../../../actions/profile'; //fetch method
import Profile from './Profile';

function Index() {
    const dispatch = useDispatch();
    const posts = useSelector((state) => state.posts);
    const currentId = useState(null);

    useEffect(() => {
        dispatch(getProfile()); 
    }, [currentId, dispatch]);

  return (
        <div className="custom-container">
        {posts.map((profile) => (
            <div key={profile._id}>
                <Profile profile={profile} currentId={currentId} />
            </div>
        
        ))}
        </div>
    );
}

export default Index;

配置文件表单组件

import './Profile.css';
import { React, useState, useEffect }  from 'react';
import Button from 'react-bootstrap/Button';
import { TextField  } from '@material-ui/core';
import { useDispatch, useSelector } from 'react-redux';
import { updateProfile } from '../../../actions/profile';

 const Profile = ({ profile, currentId }) => {
    const dispatch = useDispatch();
    currentId = profile._id;
    const [postData, setPostData] = useState(
        {
            profile: {
                name: "",
                description: "",
                email: "",
                number: "",
            }
                
        }
    );

    const post = useSelector((state) => currentId ? state.posts.find((p) => p._id === currentId) : null);
    
    useEffect(() => {
        if(post) setPostData(post);
    }, [post])

    const handleSubmit = (e) => {
        e.preventDefault();

        if(currentId) {
            dispatch(updateProfile(currentId, postData));
        }
    }

    // const [ImageFileName, setImageFileName] = useState("Upload Profile Picture");
    // const [fileName, setFileName] = useState("Upload CV");
  
    return (
        <form autoComplete="off" noValidate className="form" onSubmit={handleSubmit}>
            
            <TextField
            id="name"
            name="name"
            className="name"
            label="Full Name"
            variant="outlined"
            value={postData.profile.name}
            onChange={(e) => setPostData({ ...postData, name: e.target.value })}
            />

            <TextField
            id="outlined-multiline-static"
            label="Multiline"
            multiline
            rows={4}
            variant="outlined"
            size="small"
            className="mb-3"
            name="description"
            value={postData.profile.description}
            onChange={(e) => setPostData({ ...postData, description: e.target.value })}
            fullWidth
            />

            <TextField
            id="email"
            label="Email"
            variant="outlined"
            size="small"
            className="mb-3"
            name="email"
            value={postData.profile.email} 
            onChange={(e) => setPostData({ ...postData, email: e.target.value })}
            />
            <TextField
            id="phone"
            label="Phone Number"
            variant="outlined"
            size="small"
            name="phone"
            value={postData.profile.number}
            onChange={(e) => setPostData({ ...postData, number: e.target.value })}
            />
            <Button variant="light" type="submit" className="Save">Save</Button>
        </form>
    );
}

export default Profile;

标签： reactjsmaterial-ui

例如，如果您查看该name字段，您可以看到值是postData.profile.namewhile onChangeyour setting postData.name。

尝试设置配置文件对象，例如：

onChange={(e) => setPostData({ ...postData, profile: { ...postData.profile, name: e.target.value } })}

reactjs - TextField 输入文本的设置值变得不可编辑

问题描述

解决方案

推荐阅读