时间戳

首页 > 解决方案 > ReactJS无法从表单输入中获取价值

reactjs - ReactJS无法从表单输入中获取价值

问题描述

我一直在尝试制作一个响应表单，将 POST 请求发送到外部 api，但我似乎无法获得响应的值。我一直在按照这个例子来完成它https://gist.github.com/whoisryosuke/578be458b5fdb4e71b75b205608f3733

这是我的代码


    constructor(props) {
    super(props);
    this.state = {name: ''};
    }

    handleChange = (event) => {
        this.setState({[event.target.name]: event.target.value});
        console.log(this.state);
    }

    handleSubmit = (event) => {
        alert('A form was submitted ' + this.state);

    fetch('http://localhost/external/api/', {
        method: 'POST',
        body: JSON.stringify(this.state)
    }).then(function(response) {
        console.log(response)
        return response.json();
    });

    event.preventDefault();
}

    render() {
    return (
              <form onSubmit={this.handleSubmit}>
                <label htmlFor="chave">
                    <span>Pesquisa de produtos: </span>
                </label>
                <input type="text" value={this.state.value} name="name" onChange={this.handleChange} />
                <input type="submit" value="Pesquisar" />
              </form>
        );
    }
}

当我单击提交时，我得到的只是“提交了表单 [object Object]”

标签： reactjsformsapiposthttp-post

解决方案

写

event.preventDefault()

早于 fetch 在第一行:)

推荐阅读