Console.log 使用 React js 在表单中输入的数据

Question

我正在尝试使用 React JS 通过表单输入数据，但它不起作用。

我有一个 Partner 模型，它有一个名称和一个徽标。我创建了一个表格来输入合作伙伴的名称及其徽标图像。

这是 AddPartnerForm.js 文件：

import React, { Component } from 'react';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Skeleton from '@material-ui/lab/Skeleton';
import axios, { post } from 'axios';


export default class AddPartnerForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newPartnerData: {
        partnerlogo: '',
        partnername: ''
      },
      partnerlogouploaded: false
    }
    this.onChange = this.onChange.bind(this)
    this.onUpload = this.onUpload.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

onChange(e) {
     this.setState({
       newPartnerData: {
        [e.target.name]: e.target.result
       }
     });
}

onUpload(e) {
    let file= e.target.files[0];
    this.setState({
          newPartnerData: {
          partnerlogo: file,
        }
    }); 
    this.setState({ partnerlogouploaded: true });
  }

handleSubmit(e){
  e.preventDefault()
  console.log(this.state.newPartnerData)
}

render() {
    let partnerlogo;
    if (partnerlogouploaded) {
      partnerlogo = <img style={{ width: 200, height: 200 }} src={this.state.partnerlogo} />;
    } else {
      partnerlogo = <Skeleton variant="rect" width={200} height={200} />;
    }
  return (
      <form>
        <TextField
          name="partnername"
          autoFocus
          margin="dense"
          id="name"
          label="Partner's name"
          type="text"
          fullWidth
          onChange={this.onChange}
        />
        <input accept="image/*"
          style={{ display: 'none' }}
          id="contained-button-partner-logo"
          name="partnerlogo"
          multiple
          type="file"
          diplay="none"
          onChange={this.onUpload} />

        <label htmlFor="contained-button-partner-logo" className="upload-button">
          <Button variant="contained" color="primary" component="span" >
            Upload Partner Logo
          </Button>
        </label>

        <Box width={200} height={200} marginRight={0.5} my={5}>
         {partnerlogo}
        </Box>

        <Button type="submit" onClick={this.handleSubmit} variant="contained" color="primary" component="span" >
            Add
        </Button>
      </form>
    )
  }
}

当我在表单中仅输入合作伙伴的名称（不上传图片）时，我收到以下回复： {合作伙伴名称：未定义}

当我上传图片并输入合作伙伴的名字时，我得到了这样的回复： {合作伙伴标志：文件} （我只得到我上传的图片）

Answer 1

将e.target.result更改为e.target.value

onChange(e) {
         this.setState({
           newPartnerData: {
            [e.target.name]: e.target.value
           }
         });
    }


onUpload(e) {
    let file= e.target.files[0];
    this.setState(prev => ({
      ...prev,
      newPartnerData: {
      ...prev.newPartnerData,
      partnerlogo: file,
    },
    partnerlogouploaded: true
    })); 
  }

Console.log 使用 React js 在表单中输入的数据

Console.log data entered in a form with React js

javascript

file-upload

form-data

reactjs