Question

我是新来做出反应的，我有一个小问题，我正在尝试使用表单联系人中的select更新我的变量： 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>
            <div className="col-md-8 m-auto">
              <h1 className="display-4 text-center">Add book</h1>
              <p className="lead text-center">
                  Create new book
              </p>

              <form noValidate onSubmit={this.onSubmit}>
                <div className='form-group'>
                  <input
                    type='text'
                    placeholder='Name'
                    name='nom'
                    className='form-control'
                    value={this.state.nom}
                    onChange={this.onChange}
                  />
                </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 name="nom" value={this.state.nom} onChange={this.onChange}>

选择形式反应

1 个答案: