Question

我有一个组件，其中有一个下拉列表，其中将填充DB。现在，每当“添加字段” 按钮在其他组件中单击时，我就将其注入（可能不止一次）。因此，如何从此动态下拉列表中获取数据并附加到FormData，并将其发送到后端。任何帮助将不胜感激。下面，我只是通过代码来介绍我的组件。

Answer 1

我将这两个文件的代码放在这里，所以更容易知道。

CreateUser.js

<Form.Label>Social Account Links</Form.Label>
<Form.Row>
  <Form.Group as={Col} className="col-md-3" controlId="formGridChannel">
    <Form.Control as="select" name="channel" value={channel} onChange={this.onChange}>
      {channels}  /** This channels will populate from DB through componentDidMount hook call */
    </Form.Control>
  </Form.Group>
  <Form.Group as={Col} className="col-md-8" controlId="formGridSocialUrl">
    <Form.Control type="url" name="socialUrl" value={socialUrl} placeholder="Social Profile Link" onChange={this.onChange} />
  </Form.Group>
  <Form.Group as={Col} className="col-md-1" controlId="formGridSocialLink">
    <Button variant="danger" type="button" onClick={() => this.setState({ fieldCount: fieldCount + 1 })}>Add Field</Button>
  </Form.Group>
</Form.Row>

{Array(fieldCount).fill(<InputElem channels={channels} />)}

InputElem.js

constructor(props) {
  super(props);
  this.state = { channels: '', channel: '', socialUrl: '' };
  this.onChange = this.onChange.bind(this);
}

/** Hook Call to receive channels as Props from Parent Component (CreateUser.js) */
componentDidMount = () => this.setState({ channels: this.props.channels });

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

/** Render Part */
<Form.Row>
  <Form.Group as={Col} className="col-md-3" controlId="formGridChannel">
    <Form.Control as="select" name="channel" value={channel} onChange={this.onChange}>
      {channels}
    </Form.Control>
  </Form.Group>
  <Form.Group as={Col} className="col-md-8" controlId="formGridSocialUrl">
    <Form.Control type="url" name="socialUrl" value={socialUrl} placeholder="Brand Social Link" onChange={this.onChange} />
  </Form.Group>
</Form.Row>

高级谢谢您的帮助。

如何在React中访问动态添加的字段值？

1 个答案: