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

Question

这是我的 React 组件

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

Answer 1

在 React 中，表单组件有两种选择：

受控组件( https://reactjs.org/docs/forms.html#controlled-components ) 通过将它们的 value 属性设置为状态变量来将它们的值链接到组件状态。在这种情况下，您可以使用组件的 this.state 来检查它们的值。

不受控制的组件（https://reactjs.org/docs/uncontrolled-components.html）在实例化时可以将引用附加到其父组件......通常像这样ref={(input) => this.input = input}。当您的函数search被调用时，您可以检查该值的引用，即this.input.value.