代码之家  ›  专栏  ›  技术社区  ›  Ayush Gupta

如何在React中获取提交的表单值?

  •  0
  • Ayush Gupta  · 技术社区  · 7 年前

    这是我的反应组件

    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();
        }
    }
    

    单击提交按钮,我的功能 search 确实会接到电话。但是,如何获取提交的值?

    e.target 给我整个表单DOM HTML e.target.value undefined

    2 回复  |  直到 7 年前
        1
  •  5
  •   Joshua R.    7 年前

    在React中,表单组件有两个选项:

    受控组件 ( https://reactjs.org/docs/forms.html#controlled-components )通过将其值prop设置为状态变量,将其值链接到组件状态。在此场景中,您可以使用组件的this。状态以检查其值。

    非受控部件 ( https://reactjs.org/docs/uncontrolled-components.html )可以在实例化时将引用附加到其父组件。。。通常是这样 ref={(input) => this.input = input} . 当您的功能 search 调用时,可以检查该值的引用,即。 this.input.value .

        2
  •  0
  •   Arnab Kar    7 年前

    您需要为此使用状态变量。 例如,同步此。状态每当文本更改时,使用元素搜索文本。然后定义回调机制,如-

    onSubmit={()=>{
    console.log('My searchBox's latest value is : ',this.state.searchText);
    }}
    

    记住,在React中,我们遵循单向流。因此,我们总是从道具或状态获取数据,不需要进行DOM遍历。