ReactJS无法从表单输入中获取价值答案

【问题标题】：ReactJS Can't get value from form inputReactJS无法从表单输入中获取价值
【发布时间】：2021-09-30 18:45:30
【问题描述】：

我一直在尝试制作一个响应表单，将 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]”

【问题讨论】：

alert('A form was submitted ' + this.state); 尝试将字符串与状态对象连接起来。这没有意义，所以最终发生的事情是状态对象被强制转换为字符串“[Object object]”。要在控制台中查看实际对象，请使用逗号与 console.log - console.log('A form was submitted ', this.state); 或将其转换为 JSON JSON.stringify(this.state)

标签： reactjs forms api post http-post

【解决方案1】：

写

event.preventDefault()

早于 fetch 在第一行 :)

【讨论】：