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

我知道了，我需要将e.target.img更改为e.target.name，它正在查看目标的名称，即img。

Answer 2

您可以使用以下方法遍历表单元素，提取其值并创建自己的对象。然后，对对象执行任何操作：

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" />

从模态中的表单创建新对象

2 个答案: