React-on form submit Получить параметры POST

Я использую React и хотел бы получить параметры POST из формы (см. ниже):

<form ref='form' className="form">
    <input type="text" className="signup-input" />
    <input type="text" className="signup-input" />
    <button className="btn btn-primary" onClick={this._onSubmitClick}>Submit</button>
</form>

В обратном вызове _onSubmitClick я хотел бы получить те же результаты, что и вызов $(".form").serialize(), но без использования JQuery.

Ответы

Ответ 1

var elements = this.refs.form.getDOMNode().elements;

предоставляет вам объект, содержащий каждый из узлов input, который вы могли бы затем пропустить.

Ответ 2

в дополнение к ответу, я думаю, кому-то это понравится;)

export default class LoginView extends React.Component {
    handleSubmit(evt) {
        const formData = Array.from(evt.target.elements)
            .filter(el => el.name)
            .reduce((a, b) => ({...a, [b.name]: b.value}), {});
        console.log(formData);
        evt.preventDefault();
        return false;
    }

    render() {
        return (<form onSubmit={this.handleSubmit}>...</form>)
    }
}

Ответ 3

Вы можете поместить ref на каждый input:

<form ref='form' className="form">
    <input type="text" ref="firstName" className="signup-input" />
    <input type="text" ref="lastName" className="signup-input" />
    <button className="btn btn-primary" onClick={this._onSubmitClick}>Submit</button>
</form>

И затем использовать React.findDOMNode для доступа к ним в _onSubmitClick:

_onSubmitClick: function() {
    var firstName = React.findDOMNode(this.refs.firstName).getValue();
    var lastName = React.findDOMNode(this.refs.lastName).getValue();
    // ...
}