选择形式反应

Question

我是新手，我有一个小问题，我正在尝试使用我的表单联系人中的选择更新我的变量：nom，然后进行发布请求，但是当我尝试发送请求时我无法检索此数据我得到了400错误但是当我删除选择并使用文本区域时一切正常

你能帮我理解我错在哪里吗？

这是我的代码工作

    import React, { Component } from 'react';

import { Link } from 'react-router-dom';

import '../App.css';

import axios from 'axios';

import { Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';

class Create extends Component {

  constructor() {

    super();

    this.state = {

      nom: ''

    };

  }

  onChange = e => {

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

  };

  onSubmit = e => {

alert('Votre parfum favori est : ' + this.state.value);

    e.preventDefault();

    const data = {

      nom: this.state.nom

    };

    axios

      .post('http://localhost:8082/', data)

      .then(res => {

        this.setState({

          nom:'',

        })

        this.props.history.push('/');

      })

      .catch(err => {

        console.log("Error in CreateBook!");

        console.log(err);

      })

  };

  render() {

    return (

      <div>

      <div className="Create">

        <div className="container">

          <div className="row">

            <div className="col-md-8 m-auto">

              <br />

              <Link to="/" className="btn btn-outline-warning float-left">

                  Show book List

              </Link>

            </div>

              </p>

                  />

                </div>

              </form>

          </div>

          </div>

        </div>

      </div>

      </div>

    );

  }

}

export default Create;

这是我要替换实际文本区域的代码

                <label>

          Choisissez votre parfum favori :

          <select value={this.state.nom} onChange={this.onChange}>

            <option value="grapefruit">Pamplemousse</option>

            <option value="lime">Citron vert</option>

            <option value="coconut">Noix de coco</option>

            <option value="mango">Mangue</option>

          </select>

        </label>

Answer 1

您必须给选择名称“nom”：<select&nbsp;name="nom"&nbsp;value={this.state.nom}&nbsp;onChange={this.onChange}>