React 如何从表单中获取数据答案

【问题标题】：How to get data from a form in ReactReact 如何从表单中获取数据
【发布时间】：2021-03-11 15:26:35
【问题描述】：

我的 React 网站上有一个表单，我正在尝试获取用户输入的数据。我遵循了文档here 和类似的 Stack Overflow 帖子here，当我按下提交按钮时，我收到了警报消息。但是，它不允许我在输入字段中输入任何内容。

我的代码：

class Search extends Component {
    constructor(props) {
        super(props);
        this.state = { value: "" };

        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({ value: event.target.value});
    }

    handleSubmit(event) {
        alert('A name was submitted: ' + this.state.value);
        event.preventDefault();
    }

    render() { 
        return (
            <div className="Search">
                <form className="searchBox" onSubmit={this.handleSubmit}>
                    <input type="text" value={this.state.value}/>
                    <input type="submit" value="Go" />
                </form>
            </div>
        );
    }
}

【问题讨论】：

您忘记在输入元素上添加onChange 事件处理程序---> <input type="text" value={this.state.value} onChange={this.handleChange}/>
@Yousaf，我以为我忘记了什么，谢谢

标签： reactjs

【解决方案1】：

如果您使用 react 的默认表单设置，那么您需要对每个输入字段使用 onChange 处理程序，并且还需要维护这些字段的状态，但我认为您应该使用 Formik，因为它提供的功能比默认 react 更多表单设置和表单验证。但是要回答您的问题- 为您的输入字段使用 onChange 处理程序，并在提交期间访问这些输入处理程序状态。

【讨论】：