Armeen Moon Ответов: 0

Как я могу отправить свои данные reactjs в базу данных mysql

Я пытаюсь отправить свои данные reactjs в базу данных mysql, прямо сейчас вы можете увидеть код ниже, в настоящее время он просто отправляет данные и начинает показывать отправленные данные в модальном режиме, но мне нужно изменить это, пожалуйста, помогите мне, как это сделать

Мой makeform.js

<Form>
      {fields.map((each, index) => {
        return (
          <Form.Item key={each.name}>
            <Input
              placeholder={each.placeholder}
              name={each.name}
              ref={refs[index]}
              onChange={_handleChange}
              onFocus={() => _setActiveInput(each.name)}
              onBlur={() => _setActiveInput(null)}
              value={formData[each.name]}
              autoComplete="off"
            />
          </Form.Item>
        );
      })}
      <Form.Item className="center">
        <Button type="primary" onClick={_handleSubmit}>
          Submit
        </Button>
      </Form.Item>
    </Form>


Мой App.js


// Handle submit button
_handleSubmit = e => this.setState({ showModal: true });


render() {
  const {
    refs,
    loading,
    formData,
    showModal,
    debugMode,
    recordedString,
    error
  } = this.state;
  return (

            <MakeForm
              fields={fields}
              formData={formData}
              refs={refs}
              _handleChange={this._handleChange}
              _setActiveInput={this._setActiveInput}
              _handleSubmit={this._handleSubmit}
            />
          </Col>
          <Col span={8}>
            <Help />
          </Col>
        </Row>
      </Col>
      <FormDetailsModal
        showModal={showModal}
        formData={formData}
        fields={fields}
        _hideModal={this._hideModal}
      />
    </Row>


а это моя форма.json 

"fields": [
       {
           "name": "first_name",
           "placeholder": "First Name",
           "type": "input",
           "triggers": [
               "first name"
           ]
       },
       {
           "name": "last_name",
           "placeholder": "Last Name",
           "type": "input",
           "triggers": [
               "last name",
               "surname"
           ]
       },


Что я уже пробовал:

я пытался сделать это так 

addFormData(evt)
    {
      evt.preventDefault();
      const fd = new FormData();
      fd.append('myUsername', this.refs.myUsername.value);
      fd.append('myEmail', this.refs.myEmail.value);
      
      axios.post('http://localhost/savedata.php', fd
      ).then(res=>
      {


но проблема в том, что моя форма не так проста, как эта 

<form ref={(el) => this.myFormRef = el}>
        <div className="form-group">
        <input type="email" className="form-control" id="Email" aria-describedby="emailHelp" placeholder="Enter email" ref="myEmail" />
        
        </div>
        <div className="form-group">
        <input type="text" className="form-control" id="Username" placeholder="Enter Username" ref="myUsername" />
        </div>
        <button type="submit" className="btn btn-primary" onClick={this.addFormData}>Submit</button>
      </form>


вместо этого это так, как я уже упоминал в makeform.js

0 Ответов