React 如何从表单中获取数据

Posted 2023-02-22

【中文标题】React 如何从表单中获取数据

【英文标题】：How to get data from a form in React

【发布时间】：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，我以为我忘记了什么，谢谢

【参考方案1】：

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