React JS - 如何在 enter 或 keydown 上提交表单

Question

我有一个简单的 React JS 应用程序，我想添加一个搜索功能。我创建了搜索函数代码并添加了搜索组件（来自 Semantic-UI），它将搜索到的值传递给函数。

如何让它从下面的搜索组件调用函数来触发表单提交？

这是搜索组件。

   <Search
         onSearchChange={(e) => this.handleSearchChangeNew(e.target.value)}
    />

这里是搜索功能：

async handleSearchChangeNew (value) {
     console.log("value in new search: " + value)
     this.props.updateSearchString(value);

     fetch(`api/license/search/${JSON.stringify(this.props.searchString)}`, {
        credentials: 'include'})
        .then(response => response.json())
        .then(data => this.setState({
          licenses: data,
          isLoading: false,
          licensePage: data.slice(this.state.begin, this.state.end)

        }))
        .catch(() => this.props.history.push('/'));
    }

上面的函数打印从搜索框传递过来的值。

我之前组装了一个有点不雅的搜索功能，其中输入被键入到一个文本框中，并且通过按“搜索”提交功能来调用上述搜索功能。该搜索功能将根据输入框中的内容重新填充页面。它还在里面，不过我还添加了上面显示的新搜索功能代码。

作为参考，这是整个课程。

import React, { Component } from 'react';
import {  Button, ButtonGroup, Container, Table } from 'reactstrap';

import { Pagination, Search } from 'semantic-ui-react'

import AppNavbar from './AppNavbar';
import { Link, withRouter } from 'react-router-dom';
import { instanceOf } from 'prop-types';
import { withCookies, Cookies } from 'react-cookie';


class LicenseList extends Component {



  static propTypes = {
    cookies: instanceOf(Cookies).isRequired
  };

  constructor(props) {


    super(props);
    const {cookies} = props;


    this.state = {

      word: '',
      newWord: '',
      licenses: [],
      licensePage: [],
      csrfToken: cookies.get('XSRF-TOKEN'), 
      isLoading: true,
      licensesPerPage: 7,
      activePage: 1,
      begin: 0,
      end: 7
    };

    this.remove = this.remove.bind(this);
    this.btnClick = this.btnClick.bind(this);
    this.handleSearchChangeNew = this.handleSearchChangeNew.bind(this);

  }


  componentDidMount() {


   this.setState({isLoading: true});

   console.log("searchString: " + this.props.searchString);


    fetch(`/api/license/search/${this.props.searchString}`, {credentials: 'include'})
      .then(response => response.json())
      .then(data => this.setState({
        licenses: data,
        isLoading: false,
        licensePage: data.slice(this.state.begin, this.state.end)

      }))
      .catch(() => this.props.history.push('/'));
  }




   async handleSearchChange(value) {
        this.props.updateSearchString(value)

    }


   async searchFromString () {


     this.setState({isLoading: true});

     fetch(`api/license/search/${this.props.searchString}`, {
        credentials: 'include'})
        .then(response => response.json())
        .then(data => this.setState({
          licenses: data,
          isLoading: false,
          licensePage: data.slice(this.state.begin, this.state.end)

        }))
        .catch(() => this.props.history.push('/'));
    }

   async clearSearchString(value) {
       this.props.updateSearchString('');
    }



   async btnClick(
      event: React.MouseEvent<HTMLAnchorElement>,
      data: PaginationProps
    ) {
      await this.setState({activePage: data.activePage});
      await this.setState({begin: this.state.activePage * this.state.licensesPerPage - this.state.licensesPerPage});
      await this.setState({end: this.state.activePage *this.state.licensesPerPage});
      this.setState({
        licensePage: this.state.licenses.slice(this.state.begin, this.state.end),
      });
    }

  async remove(id) {
    if (window.confirm('Are you sure you wish to delete this license?')) {

    await fetch(`/api/license/${id}`, {
      method: 'DELETE',
      headers: {
        'X-XSRF-TOKEN': this.state.csrfToken,
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      credentials: 'include'
    }).then(() => {
      let updatedLicenses = [...this.state.licenses].filter(i => i.id !== id);
      this.setState({licenses: updatedLicenses});
    });
  }

  }


  download(url) {
    // fake server request, getting the file url as response
    setTimeout(() => {
      const response = {
        file: url,
      };
      // server sent the url to the file!
      // now, let's download:
      window.open(response.file);
      // you could also do:
      // window.location.href = response.file;
    }, 100);
  }

  async handleSearchChangeNewx(value) {
        this.props.updateSearchString(value);

  }


  async handleSearchChangeNew (value) {
     console.log("value in new search: " + value)
     this.props.updateSearchString(value);

     fetch(`api/license/search/${JSON.stringify(this.props.searchString)}`, {
        credentials: 'include'})
        .then(response => response.json())
        .then(data => this.setState({
          licenses: data,
          isLoading: false,
          licensePage: data.slice(this.state.begin, this.state.end)

        }))
        .catch(() => this.props.history.push('/'));
    }



  render() {
    const {licensePage, activePage } = this.state;
    const {licenses, isLoading, licensesPerPage} = this.state;
    const totalPages = Math.ceil(licenses.length / licensesPerPage);

    if (isLoading) {
      return <p>Loading...</p>;
    }

      const licenseList = licensePage.map(license => {
      return<tr key={license.id}>
        <td style={{whiteSpace: 'nowrap'}}>{license.fullName}</td>
        <td style={{whiteSpace: 'nowrap'}}>{license.requester}</td>
        <td style={{whiteSpace: 'nowrap'}}>{license.tag}</td>
        <td style={{whiteSpace: 'nowrap'}}>{license.dateCreated.substring(0, 10)}</td>
        <td style={{whiteSpace: 'nowrap'}}>{license.expiration}</td>
        <td style={{whiteSpace: 'nowrap'}}>{license.systems}</td>
        <td>

        <ButtonGroup>
            <Button size="sm" color="primary" tag={Link} to={"/licenses/" + license.id}>Edit</Button>
            <Button size="sm" color="dark" onClick={() => this.download(license.url)}>Download</Button>
            <Button size="sm" color="danger" onClick={() => this.remove(license.id)}>Delete</Button>
        </ButtonGroup>

        </td>
      </tr>
    });

    return (
      <div>
        <AppNavbar/>
        <Container fluid>
         <h3>License List</h3>
         <div className="float-left">


          <div>
            <input type="text" value={this.props.searchString} onChange={(e) =>  this.props.updateSearchString(e.target.value)} />
            <input type="submit" value="Search" onClick={() => this.searchFromString()} />
            <input type="submit" value="Clear Search" onClick={() => this.clearSearchString()} />
            <Search
                 onSearchChange={(e) => this.handleSearchChangeNew(e.target.value)}
            />

           </div>


          </div>
          <div className="float-right">


          <Button color="primary" tag={Link} to="/licenses/new">Create License</Button>
          </div>
          <Table className="mt-4">
            <thead>
            <tr>
              <th width="10%">Full Name</th>
              <th width="5%">Requester</th>
              <th width="10%">Tag</th>
              <th width="5%">Created</th>
              <th width="5%">Expiration</th>
              <th width="5%">Systems</th>
              <th width="10%">Actions</th>

            </tr>
            </thead>
            <tbody>
            {licenseList}
            </tbody>
          </Table>          
          <div>
          </div>

          <div className="col text-center">
                <Pagination
                    activePage={activePage}
                    onPageChange={this.btnClick}
                    totalPages={totalPages}
                    ellipsisItem={null}
                />
           </div>

        </Container>
      </div>
    );
  }
}

export default withCookies(withRouter(LicenseList));

Answer 1

使用原生的<form> 元素，一切顺利！浏览器将完成艰巨的任务。将您的输入包装在<form> 而不是<div> 中，并将您的实际表单提交处理程序传递给<form onSubmit={this.handleSearchChangeNew}> 上的onSubmit 侦听器。那么你需要一个event.preventDefault() 来防止页面刷新；不过，给你的输入一个name 也是一个好习惯。 <form> 元素会做一个基本的验证，也会处理回车键；

同时，如果您对使用 <form> 感到不自在，您也可以自己处理按键更改事件（就像您处理大多数原生 <form> 功能一样）； 在您的表单逻辑所在的父 html 元素上添加 keyDown 事件侦听器；然后处理enter key code。

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        // enter key had been pressed
        // submit
    }
};

---

编辑：如何手动处理 keydown：

<div onKeyDown={(e)=>console.log(e.keyCode)}>
  <input .... />
  <input .... />
  <Search onSearchChange={(e) => this.handleSearchChangeNew(e.target.value)} />
</div>