получить пост-форму со ссылочными значениями - PullRequest
Новая
       8

получить пост-форму со ссылочными значениями

0 голосов
/ 01 декабря 2018

Я пытаюсь отправить данные с помощью этой формы: 

import React, { Component } from 'react';

class ToDoForm extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
       event.preventDefault();

        fetch('http://127.0.0.1:3000/add', {
            method: 'post',
            body: {
                what: this.refs.what.value, 
                when: this.refs.when.value, 
            }
        })
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                New task : 
                <label htmlFor="what"> Enter what</label>
                <input id="what" ref="what" name="what" type="text" required/>

                <label htmlFor="when">Enter when</label>
                <input id="when" ref="when" name="when" required/>

                <button>Send data!</button>
            </form>
        );
    }
}

export default ToDoForm;

, но на стороне сервера я не могу получить req.body: 

app.post('/add', (req, res) => {

    console.log(req.body);

    db.collection('task').countDocuments( (err, count) => {
        if (err) console.log(err);

        db.collection('task').insertOne({
            id : count + 1,
            what : req.body.what,
            when : req.body.when,
            done : false
        });
    });
    res.send('The \"' + req.body.what + '\" task has been added.');
});

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

Ответы [ 2 ]

0 голосов
/ 01 декабря 2018

Это не то, как вы создаете ссылки ( читайте https://reactjs.org/docs/refs-and-the-dom.html)

Быстрое исправление в вашем коде 

<label htmlFor="what"> Enter what</label>
<input id="what" ref={el=>this.what=el} name="what" type="text" required/>

<label htmlFor="when">Enter when</label>
<input id="when" ref={el=>this.when=el} name="when" required/>

и используйте его как 

body: {
    what: this.what.value, 
    when: this.when.value, 
}

Другой способ - использовать предварительную раздачу createRef и передать ее атрибуту ref. 

class ToDoForm extends Component {
    constructor(props) {
        super(props);
        this.what = React.createRef();
        this.when = React.createRef();
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
       event.preventDefault();

        fetch('http://127.0.0.1:3000/add', {
            method: 'post',
            body: {
                what: this.what.value, 
                when: this.when.value, 
            }
        })
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                New task : 
                <label htmlFor="what"> Enter what</label>
                <input id="what" ref={this.what} name="what" type="text" required/>

                <label htmlFor="when">Enter when</label>
                <input id="when" ref={this.when} name="when" required/>

                <button>Send data!</button>
            </form>
        );
    }
}
0 голосов
/ 01 декабря 2018

Вам не нужны ссылки, это должно иметь значение формы: 

event.target.elements.what.value
event.target.elements.when.value

Первое, что refs doc говорит, это не использовать их, если это не единственный возможный способ.

...