将功能添加到React中的UX形式元素

Question

我正在为一个项目使用React，该项目需要我提交表格。我已经使用formik来创建一个记录输入的一个，但是现在我添加了一些UI元素（即范围滑块和日期选择器），我似乎无法将它们与其他表单链接起来。

我已经尝试在两者上使用Onchange玩，但似乎无法记录输入。任何帮助都将不胜感激。

我的表格看起来像这样：

import './App.css';
import {Routes, Route, Link} from 'react-router-dom';
import BootstrapDatePickerComponent from './datepicker'
import React, { Component, useState } from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
import {Form, Row, Col, Button, FormControl, InputGroup, Nav, Navbar, Container, Card, ListGroup, NavDropdown, Offcanvas, Text} from 'react-bootstrap/'
import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
import Score from './slider';
import Archive from './Database'
import { Formik } from 'formik';
import { useFormik } from 'formik';
import RangeSlider from 'react-bootstrap-range-slider';


function Submit () {


  const [ value, setValue ] = React.useState(25);
  const formik = useFormik({
    initialValues: {
      Username: '',
      Address: '',
      Postcode: '',
      Details: '',
      Date:'',
      Score: '',
    },
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <Form onSubmit={formik.handleSubmit} className="submit-form">
      <Form.Group className="mb-3">

        <InputGroup className="mb-3">
        <InputGroup.Text id="Username" name="username" type="text" onChange={formik.handleChange}value={formik.values.Username}>Username</InputGroup.Text>
        <FormControl
        aria-label="Default"
        aria-describedby="inputGroup-sizing-default"
        id="Username"
        name="Username"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.Username}
        />
        </InputGroup>
        <InputGroup className="mb-3">
        <InputGroup.Text id="Address" name="Address" type="text" onChange={formik.handleChange}value={formik.values.Username}>Address</InputGroup.Text>
        <FormControl
        aria-label="Default"
        aria-describedby="inputGroup-sizing-default"
        Placeholder="Please enter the house/flat number and street name..."
        id="Address"
        name="Address"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.Address}
        />
        </InputGroup>
        <InputGroup className="mb-3">
        <InputGroup.Text id="Address" name="Postcode" type="text" onChange={formik.handleChange} value={formik.values.Address}>Postcode</InputGroup.Text>
        <FormControl
        aria-label="Default"
        aria-describedby="inputGroup-sizing-default"
        Placeholder="Please enter the postcode..."
        id="Postcode"
        name="Postcode"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.Postcode}
        />
        </InputGroup>
      </Form.Group>
      <InputGroup>
      <InputGroup.Text>Details</InputGroup.Text>
      <FormControl
      as="textarea"
      aria-label="Details"
      placeholder="Tell us about your issue..."
      id="Details"
      name="Details"
      type="text"
      onChange={formik.handleChange}
      value={formik.values.Details}
      />
      </InputGroup>
      <div className="DatePicker">
        <BootstrapDatePickerComponent />
      </div>
      <Form.Label>How would you rank your overall experience in this property?</Form.Label>
      <div className="Score">
      <Form.Group as={Row}>
        <Col xs="9">
          <RangeSlider
            value={value}
            onChange={e => setValue(e.target.value)} 
          />
        </Col>
        <Col xs="3">
          <Form.Control
          aria-label="Default"
          value={value}
          id="Score"
          name="Details"
          type="number"
          onChange={formik.handleChange}/>
        </Col>
      </Form.Group>
      </div>
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
  )


  }

export default Submit;

我的UI组件看起来像这样：

Rangeslider：

import React, { useState } from 'react';
import './App.css';
import {Form, Row, Col, Button, FormControl, InputGroup, Nav, Navbar, Container, Card, ListGroup, NavDropdown, Offcanvas} from 'react-bootstrap/'
import RangeSlider from 'react-bootstrap-range-slider';
import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
import {Formik, useFormik} from 'formik'


const Score = () => {

  const [ value, setValue ] = React.useState(25);
  const formik = useFormik({
    initialValues: {
      Username: '',
      Address: '',
      Postcode: '',
      Details: '',
      Date:'',
      Score: '',
    },
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });
  return (
    <Form htmlFor="Score">
      <Form.Group as={Row}>
        <Col xs="9">
          <RangeSlider
            value={value}
            onChange={e => setValue(e.target.value)}
          />
        </Col>
        <Col xs="3">
          <Form.Control
          aria-label="Default"
          value={value}
          id="Score"
          name="Details"
          type="number"
          onChange={formik.handleChange}/>
        </Col>
      </Form.Group>
    </Form>
  );
}


export default Score;

Date Picker：

import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      startDate: new Date()
    };
    this.handleChange = this.handleChange.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }
  handleChange(date) {
    this.setState({
      startDate: date
    })
  }
  onFormSubmit(e) {
    e.preventDefault();
    console.log(this.state.startDate)
  }

  render() {
    return (
      <form onSubmit={ this.onFormSubmit }>
        <div className="form-group">
          <DatePicker
              selected={ this.state.startDate }
              onChange={ this.handleChange }
              name="startDate"
              dateFormat="MM/dd/yyyy"
          />
        </div>
      </form>
    );
  }

}
export default App;