Создание нового объекта из формы в модале в реаги

Question

Я пытаюсь создать новый объект из формы в модале, заполненном данными формы.

Это работает для имени, но не для img (в настоящее время 'img' просто настроен для отображения текста на экране, я буду работать над тем, чтобы позже загрузить фактическое изображение, но я пытаюсь получить несколько форм входы для заполнения новой записи.

Я думаю, что неправильно настроил часть onChange?

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { addContact } from '../actions/contactActions';
import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  Form,
  FormGroup,
  Label,
  Input
} from 'reactstrap'
import uuid from 'uuid';

class ContactModal extends Component {
  state = {
    modal: false,
    name: '',
    img: ''
  }

  toggle = () => {
    this.setState({
      modal: !this.state.modal
    });
  }

  onChangeName = (e) => {
    this.setState({[e.target.name]: e.target.value})
  }

  onChangeImg = (e) => {
    this.setState({[e.target.img]: e.target.value})
  }

  onSubmit = (e) => {
    e.preventDefault();

    const newContact = {
      id: uuid(),
      name: this.state.name,
      img: this.state.img
    }

    this.props.addContact(newContact);

    this.toggle();

    }

    render(){
      return(
        <div>
          <Button
            style={{marginBottom: '.5rem'}}
            onClick={this.toggle}
            className="policyadd"
            >Add New Contact
          </Button>
          <Modal
            isOpen={this.state.modal}
            toggle={this.toggle}
            >
            <ModalHeader toggle={this.toggle}>
              Add A New Contact
            </ModalHeader>
            <ModalBody>
              <Form onSubmit={this.onSubmit}>

                <FormGroup>
                  <Label for="name">Name</Label>
                  <Input
                    type="text"
                    name="name"
                    id="name"
                    placeholder="Add name of new contact"
                    onChange={this.onChangeName}
                    />
                </FormGroup>
                <FormGroup>
                  <Label for="img">link to image</Label>
                  <Input
                    type="text"
                    name="img"
                    id="img"
                    placeholder="Add path to image"
                    onChange={this.onChangeImg}
                    />
                </FormGroup>
                <Button
                  className="policyadd"
                  style={{marginTop: '1rem'}}
                  block
                  >Add Contact
                </Button>
              </Form>
            </ModalBody>
          </Modal>
        </div>

      )
    }
}

const mapStateToProps = state => ({
  contact: state.contact
})


export default connect(mapStateToProps, {addContact})(ContactModal)

Answer 1

Вы можете использовать следующий подход для перебора элементов формы, извлечения их значений и создания собственного объекта. Затем делайте все что угодно с вашим объектом:

class App extends React.Component {
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const data = new FormData(form);
    for (let name of data.keys()) {
      const input = form.elements[name];
      console.log(input);
      console.log('value:', input.value);
    }
    
  }

    render() {
      return (
        <form onSubmit={this.handleSubmit}>
              <label>Name: <input name="name" type="text" /></label><br />
              <label>Image: <input name="img" type="text" /></label><br />
              <input type="submit" value="Submit" />
        </form>
      );
   }
}

ReactDOM.render( < App / > ,
  document.getElementById('root')
)

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<div id="root" />

Answer 2

Я понял, мне нужно было изменить e.target.img на e.target.name, он смотрит на имя цели, то есть img.