如何在React中提交表单值？ [英] How do I get submitted form value in React?

问题描述

这是我的React组件

 从'react'导入React，{Component}; 
从'./categories.json'导入类别
导入'./content.css'
 
导出默认类别内容扩展组件{
构造函数（道具）{ 
 super（道具）
 this.state = {
 searchText：''，
类别
} 
} 
 
渲染（）{
 return（
< div className =content> 
< form className =searchformonSubmit = {this.search}> 
< input type =textname =keywordid =searchboxplaceholder =Search String>< / input> 
< select name =categoriesid =searchcategories> 
< option defaultValue =defaultChecked>选择一个类别< / option> 
 {this.state.categories.map（x => 
< option key = {x.value} value = {x.value}> {x.name}< / option> 
）}< / select> 
< i nput type =submitvalue =Searchid =searchsubmit/> 
< / form> 
< / div> 
）
} 
 
 search（e）{
 console.log（e.target）
 e.preventDefault（）; 
 
 
 
 
 
 
 
点击提交按钮，我的函数 search 确实被调用。但是，如何获得提交的值？ 
 
 
  e.target 为整个表单提供了DOM HTML 
  e.target.value 是 undefined   
 
解决方案
在React中，对于表单组件有两个选项： 
 
 
 受控组件（ https://reactjs.org/docs/forms.html#controlled-components ）有他们的值通过将其值prop设置为状态变量而链接到组件状态。在这种情况下，您可以使用组件的this.state来检查它们的值。
 
 $ b  未受控制的组件（ https://reactjs.org/docs/uncontrolled-components.html ）在实例化时可以将引用附加到其父组件...通常像这样 ref = {（input）=> this.input = input} 。调用函数 search 时，您可以检查该值的引用，即 this.input.value 。
 
Here is my React Component
import React, { Component } from 'react';
import categories from './categories.json'
import './content.css'

export default class Content extends Component {
    constructor(props) {
        super(props)
        this.state = {
            searchText: '',
            categories
        }
    }

    render() {
        return(
            <div className="content">
            <form className="searchform" onSubmit={this.search}>
                <input type="text" name="keyword" id="searchbox" placeholder="Search String"></input>
                <select name="categories" id="searchcategories">
                <option defaultValue="" defaultChecked>Select a category</option>
                {this.state.categories.map(x => 
                    <option key={x.value} value={x.value}>{x.name}</option>
                )}</select>
                <input type="submit" value ="Search" id="searchsubmit" />
            </form>
            </div>
        )
    }

    search(e) {
        console.log(e.target)
        e.preventDefault();
    }
}
On clicking the submit button, my function search does get called. However, how do I get the submitted values?

e.target gives me the whole form DOM HTML
e.target.value is undefined
解决方案
In React, you have two options for form components:

Controlled components (https://reactjs.org/docs/forms.html#controlled-components) have their value linked to component state by setting their value prop to a state variable.  In this scenario, you can use your component's this.state to inspect their values.

Uncontrolled components (https://reactjs.org/docs/uncontrolled-components.html) can have references attached to their parent component when instantiated... typically like this ref={(input) => this.input = input}.  When your function search is called, you can inspect the reference for the value, i.e. this.input.value.

                        
这篇关于如何在React中提交表单值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！