reactjs - 如何更改输入元素中的值？（反应）

Question

我要做的是，如果用户单击“编辑”按钮，则会打开模式，并且输入字段的值应该是旧的，而不是更新的值。但是当我这样做时，我不能写其他任何东西。

（例如，如果用户想要更新名称，通过打开模式 EditUser，用户名称的旧值应该在输入字段中，并且用户需要有机会更改它。）

<Input 
    type="text" 
    onChange={(e: any) => setFirstNameUpdated(e.target.value)} 
    value={props.userInfo.firstName}>        
</Input>

我尝试使用 useRef：

const inputNameRef = useRef<HTMLInputElement | any>(null)

useEffect(() => {
    console.log(inputNameRef.current)     // this is null
    console.log(props.userInfo.firstName) // this is OK
    inputNameRef.current && (inputNameRef.current.value=props.userInfo.firstName)
}, [])

<Input 
    type="text" 
    onChange={(e: any) => setFirstNameUpdated(e.target.value)} 
    ref={inputNameRef}>        
</Input>

编辑： SinglePost.tsx

import React, { useState, useRef, useEffect } from 'react'
import { Modal, ModalHeader, ModalBody, ModalFooter, Button, FormGroup, Label, Input } from 'reactstrap'
import Axios from 'axios'
import '../user_profile/myprofile.css'

function UpdateProfile(props: any) {

    const [firstNameUpdated, setFirstNameUpdated] = useState('')
    const [lastNameUpdated, setLastNameUpdated] = useState('')
    const [userBioUpdated, setUserBioUpdated] = useState('')

    const inputNameRef = useRef<HTMLInputElement | any>(null)

    useEffect(() => {
        console.log(inputNameRef.current, props.userInfo.firstName)
        inputNameRef.current && (inputNameRef.current.value = props.userInfo.firstName)
    }, [])

    // upload image
    const [file, setFile] = useState('')
    const [uploaded, setUploaded] = useState('')

    const handleImageUpload = (e: any) => {
        e.preventDefault();
        setFile(e.target.files[0])
    };

    const onClickHandler = (e: any) => {
        const formData = new FormData()
        formData.append('fileImage', file)

        Axios.post("/api/image", formData, {})
            .then(res => {
                //console.log(`UPLOADED: http://localhost:5000/${res.data.fileImage}`)
                setUploaded(`http://localhost:5000/${res.data.fileImage}`)
            })
            .catch(err => console.log(err))
    }

    // update user
    const updateUser = (e: any) => {
        e.preventDefault()

        props.setIsEditOpen(false)

        const formData = new FormData()

        formData.append('fileImage', file)
        formData.append('first_name', firstNameUpdated)
        formData.append('last_name', lastNameUpdated)
        formData.append('user_bio', userBioUpdated)

        const config: any = { header: { "Content-Type": "multipart/form-data" } }

        Axios
            .put(`/api/users/${props.userID}`, formData, config)
            .then(res => {
                const user = res.data
                props.setUserInfo({
                    firstName: user.first_name,
                    lastName: user.last_name,
                    userBio: user.user_bio,
                    userPhoto: user.profile_image
                })
            })
            .catch(err => console.log(err))
    }

    return (
        <div>
            {props.isEditOpen &&
                <Modal isOpen={props.isEditOpen} toggle={() => props.setIsEditOpen(!props.isEditOpen)} backdrop="static">
                    <ModalHeader>Update your profile</ModalHeader>
                    <ModalBody>
                        <FormGroup>
                            <Label>Profile Image</Label>
                            <Input type="file" name="fileImage" onChange={handleImageUpload}></Input>
                        </FormGroup>
                        <Button onClick={onClickHandler} className="btn-upload-img">Upload file</Button>
                        <div className="inline">
                            {uploaded ? <img src={uploaded} style={{ width: "100px" }}></img> : <img  src={props.userInfo.userPhoto} style={{ width: "100px" }}></img>}
                        </div>
                        <FormGroup>
                            <Label>First Name</Label>
                            <Input type="text" onChange={(e: any) => setFirstNameUpdated(e.target.value)} ref={inputNameRef} value={firstNameUpdated}></Input>
                        </FormGroup>
                        <FormGroup>
                            <Label>Last Name</Label>
                            <Input type="text" onChange={(e: any) => setLastNameUpdated(e.target.value)} defaultValue={props.userInfo.lastName}></Input>
                        </FormGroup>
                        <FormGroup>
                            <Label>About me</Label>
                            <Input type="text" onChange={(e: any) => setUserBioUpdated(e.target.value)} defaultValue={props.userInfo.userBio}></Input>
                        </FormGroup>
                    </ModalBody>
                    <ModalFooter>
                        <Button color="success" onClick={updateUser} className="btn-update">Update</Button>
                        <Button color="danger" onClick={() => props.setIsEditOpen(false)}>Cancel</Button>
                    </ModalFooter>
                </Modal>}
        </div>
    )
}

export default UpdateProfile

我的个人资料.tsx

import React, { useState, useEffect, useContext } from 'react'
import './myprofile.css'
import Axios from 'axios'
import SinglePost from '../single_post/SinglePost'
import { AppContext } from '../context/AppContext'
import UpdateProfile from '../modals/UpdateProfile'

function MyProfile() {

    const [userInfo, setUserInfo] = useState({
        firstName: '',
        lastName: '',
        userBio: 'Write something about yourself.',
        userPhoto: ''
    })
    const [isEditOpen, setIsEditOpen] = useState(false)

    const { userID, setUserID } = useContext(AppContext)

    // open modal on click 'edit'
    const editUser = () => {
        setIsEditOpen(true)
    }

    // get user data
    const storedToken = localStorage.getItem('token')

    useEffect(() => {
        const config = {
            headers: { "x-auth-token": `${storedToken}` }
        }
        Axios
            .get('/api/auth/user', config)
            .then(res => {
                console.log('response', res)
                const user = res.data.user
                setUserID(user._id)
                setUserInfo({
                    firstName: user.first_name,
                    lastName: user.last_name,
                    userBio: user.user_bio,
                    userPhoto: user.profile_image
                })
            })
            .catch(err => console.log(err))
    }, [])


    return (
        <div className="profile-container">
            <button className="btn-edit" onClick={editUser}>
                <i className="fa fa-edit"></i>
            </button>
            <div className="user-info">
                <div className="img-circular">
                    <img className="user-profile-img2" src={userInfo.userPhoto}></img>
                </div>
                <p className="user-name">{userInfo.firstName} {userInfo.lastName}</p>
                <p className="about-user">{userInfo.userBio}</p>
            </div>
            <div className="user-posts">
                <p className="my-posts-title">My Posts</p>
            </div>
            {isEditOpen && <UpdateProfile
                userID={userID}
                setIsEditOpen={setIsEditOpen}
                isEditOpen={isEditOpen}
                setUserInfo={setUserInfo}
                userInfo={userInfo}
            />}
            {/* <SinglePost /> */}
        </div>
    )
}

export default MyProfile

标签： reactjs