React.js/JS，如何访问文件 ex e.target.value[0]（避免创建单独的 useState）

Question

我想避免创建许多 (element setElement =useState) 我使用 (formData setFormData = useState) 如下所示，其中有一些元素。

我只能在下面的第二个示例中访问 e.target.value[0] 'file'，但如何在第一个示例中访问它。准确地说，我希望下面 passport_photo 表单上的 onChange 访问 e.target.value[0] 给我结果作为第二个示例 console.log

第一个示例；

import React, { useState } from 'react';
import { Helmet } from 'react-helmet';
import axios from 'axios';
import { connect } from 'react-redux';
import { setAlert } from '../actions/alert';
import './ApplicationForm.css';
import { useNavigate } from 'react-router-dom';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { IconButton } from '@mui/material';



function ApplicationForm({ setAlert }) {
    const [show, setShow] = useState (false);

  const [formData, setFormData] = useState({
     pasport_number: '', passport_photo: (null)
  });

  const { pasport_number, passport_photo } = formData;

  const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value });
  console.log (formData);
  const onSubmit = async (e) => {
      e.preventDefault();

      let dataForm = new FormData();

      dataForm.append('pasport_number',pasport_number)
      
      if(passport_photo !== null) {
        dataForm.append('passport_photo', passport_photo)
      }
      await axios({
        method: 'post',
        url: `${process.env.REACT_APP_API_URL}/api/application-form/`,
        data: dataForm,
        headers: {
            'Content-Type': 'multipart/form-data' 
        }

        })
      .then(_res => console.log(_res))
      .catch(_err => {
          setAlert('Error with Sending Application', 'error');
      })
  };

  return (
        <div className='applicationForm'>
            <div className='wrapper'>
                    <Helmet>
                        <title>Prosperity - Visa Application Form</title>
                        <meta
                            name='description'
                            content='Filling Application Form '
                        />
                    </Helmet>
                <div className='applicationForm__wrapper'>
                    <h1 className='applicationForm__title'>Application Form</h1>
                    <hr className='appform__hr'/>
                    <form className='applicationForm__form' onSubmit={e => onSubmit(e)} enctype="multipart/form-data">
                        <div className='form__wrap'>
    
                            <hr className='appform__hr'/>

                            <p className='passport__section__title'>Enter or Import Passport Details</p>
                            <div className='input_grp'>
                                <div className='input_wrap input_wrap__bt'>
                                    <p className='expand__p'>Enter Passport details</p>
                                    <IconButton onClick={()=> setShow(true)}>
                                        <ExpandMoreIcon className='Expand__bt'/>
                                    </IconButton>
                                    <IconButton onClick={()=> setShow(false)}>
                                        <ExpandLessIcon className='Expand__less__bt'/>
                                    </IconButton>
                                </div>
                                <div className='input_wrap input_wrap__bt import__passport'>
                                    <label className='applicationForm__form__label' htmlFor='passport_photo'>Import Passport Image</label>
                                    <input 
                                        className='input__for__two import__passport' 
                                        name='passport_photo' 
                                        type='file' 
                                        accept='image/*,.pdf'
                                        placeholder='Import Passport' 
                                        onChange={e => onChange(e)} 
                                        value={passport_photo} 
                                        required 
                                    />
                                </div>
                            </div>

                            { show?
                                <>

                                <div className='input_grp'>
                                    <div className='form__wrap'>
                                        <label className='applicationForm__form__label' htmlFor='pasport_number'>Passport Number</label>
                                        <input 
                                            className='applicationForm__form__input input__for__two' 
                                            name='pasport_number' 
                                            type='text' 
                                            placeholder='Passport Number' 
                                            onChange={e => onChange(e)} 
                                            value={pasport_number} 
                                            required 
                                        />
                                    </div>
                                </div>
                                </>
                                :null
                            }
                            <hr className='appform__hr'/>
                            <button className='contact__form__button' htmltype='submit'>Send</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
  )
}

export default connect(null, { setAlert })(ApplicationForm);

console.log(表格数据);

{pasport_number: 'test', passport_photo: 'C:\fakepath\signature.jpg'}
pasport_number: "test"
passport_photo: "C:\fakepath\signature.jpg"
[[Prototype]]: Object

第二个例子；

import React, { useState } from 'react';
import { Helmet } from 'react-helmet';
import axios from 'axios';
import { connect } from 'react-redux';
import { setAlert } from '../actions/alert';
import './ApplicationForm.css';
import { useNavigate } from 'react-router-dom';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { IconButton } from '@mui/material';



function ApplicationForm({ setAlert }) {
    const [show, setShow] = useState (false);

  const [formData, setFormData] = useState({
     pasport_number: ''
  });

  const [passport_photo, setPassport_photo] = useState(null)

  const { pasport_number } = formData;

  const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value });
  console.log (passport_photo);
  const onSubmit = async (e) => {
      e.preventDefault();

      let dataForm = new FormData();

      dataForm.append('pasport_number',pasport_number)
      
      if(passport_photo !== null) {
        dataForm.append('passport_photo', passport_photo)
      }
      await axios({
        method: 'post',
        url: `${process.env.REACT_APP_API_URL}/api/application-form/`,
        data: dataForm,
        headers: {
            'Content-Type': 'multipart/form-data' 
        }

        })
      .then(_res => console.log(_res))
      .catch(_err => {
          setAlert('Error with Sending Application', 'error');
      })
  };

  return (
        <div className='applicationForm'>
            <div className='wrapper'>
                    <Helmet>
                        <title>Prosperity - Visa Application Form</title>
                        <meta
                            name='description'
                            content='Filling Application Form '
                        />
                    </Helmet>
                <div className='applicationForm__wrapper'>
                    <h1 className='applicationForm__title'>Application Form</h1>
                    <hr className='appform__hr'/>
                    <form className='applicationForm__form' onSubmit={e => onSubmit(e)} enctype="multipart/form-data">
                        <div className='form__wrap'>
    
                            <hr className='appform__hr'/>

                            <p className='passport__section__title'>Enter or Import Passport Details</p>
                            <div className='input_grp'>
                                <div className='input_wrap input_wrap__bt'>
                                    <p className='expand__p'>Enter Passport details</p>
                                    <IconButton onClick={()=> setShow(true)}>
                                        <ExpandMoreIcon className='Expand__bt'/>
                                    </IconButton>
                                    <IconButton onClick={()=> setShow(false)}>
                                        <ExpandLessIcon className='Expand__less__bt'/>
                                    </IconButton>
                                </div>
                                <div className='input_wrap input_wrap__bt import__passport'>
                                    <label className='applicationForm__form__label' htmlFor='passport_photo'>Import Passport Image</label>
                                    <input 
                                        className='input__for__two import__passport' 
                                        name='passport_photo' 
                                        type='file' 
                                        accept='image/*,.pdf'
                                        placeholder='Import Passport' 
                                        onChange={(e)=>setPassport_photo(e.target.files[0])}
                                        required 
                                    />
                                </div>
                            </div>

                            { show?
                                <>

                                <div className='input_grp'>
                                    <div className='form__wrap'>
                                        <label className='applicationForm__form__label' htmlFor='pasport_number'>Passport Number</label>
                                        <input 
                                            className='applicationForm__form__input input__for__two' 
                                            name='pasport_number' 
                                            type='text' 
                                            placeholder='Passport Number' 
                                            onChange={e => onChange(e)} 
                                            value={pasport_number} 
                                            required 
                                        />
                                    </div>
                                </div>
                                </>
                                :null
                            }
                            <hr className='appform__hr'/>
                            <button className='contact__form__button' htmltype='submit'>Send</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
  )
}

export default connect(null, { setAlert })(ApplicationForm);

第二个例子console.log(passport_photo);

File {name: 'signature.jpg', lastModified: 1612947480000, lastModifiedDate: Wed Feb 10 2021 09:58:00 GMT+0100 (Central European Standard Time), webkitRelativePath: '', size: 536092, …}
lastModified: 1612947480000
lastModifiedDate: Wed Feb 10 2021 09:58:00 GMT+0100 (Central European Standard Time) {}
name: "signature.jpg"
size: 536092
type: "image/jpeg"
webkitRelativePath: ""
[[Prototype]]: File

Answer 1

即使您想对 formData 和 passport_photo 使用相同的状态变量，您也需要使用不同的 onChange 方法来处理 passport_photo 文件上传。

<input
  className="input__for__two import__passport"
  name="passport_photo"
  type="file"
  accept="image/*,.pdf"
  placeholder="Import Passport"
  onChange={(e) => setFormData({ ...formData, [e.target.name]: e.target.files[0] })}
  required
/>

React.js/JS，如何访问文件 ex e.target.value[0]（避免创建单独的 useState）

React.js/JS, how to access file ex e.target.value[0] (avoid creating separate useState)

javascript

javascript-objects

console.log

reactjs