javascript - 使用输入值提交表单后 React Router 重定向

Question

Form.js

我希望从此表单中得到的是像 '/search/inputValue/' 这样的链接，这样我就可以从另一个组件中提取参数。我得到的只是没有输入值的 '/search/'。

import React from 'react';
import { Link } from 'react-router-dom';

class Form extends React.Component {
    state = {
        searched: ''
    }

    onSubmit = (e) => {
        const keyword = e.target.elements.keyword.value;
        this.setState({ searched: keyword });
    }

    render(){
        return (
            <form className="form-inline" onSubmit={this.onSubmit}>
                <div className="form-group">
                    <input type="text" className="form-control" name="keyword" placeholder="Image keyword" />

                    <Link to={ `/search/${this.state.searched}`}>
                        <button className="btn btn-primary">Search</button>
                    </Link>
                </div>
            </form>       
        );
    }
};

export default Form;

我注意到状态在使用旧输入值提交后一秒更新了它的值，所以问题可能出在此处。

这可以通过删除 Link 标签、preventDefault 和控制台记录输入值来检查。第一个是空白，第二个是之前输入的值。

我的整个应用程序都已排序，我只需要弄清楚如何从输入提交到链接。

Router.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import App from '../App';
import SearchPage from './SearchPage';

const Router = () => (
    <BrowserRouter>
        <Switch>
            <Route path="/" component={App} exact />
            <Route path="/search/:keyword" component={SearchPage} />
        </Switch>
    </BrowserRouter>
);

export default Router;

Answer 1

基本上在终于找到一台电脑来帮助你之后，我意识到我的第一个 react 是正确的。

你需要:

• 绑定(bind) handleChange 方法。您在传递给 React.createClass 的对象中定义的所有方法都将自动绑定(bind)到组件实例。
• 每个状态变化都会有一个关联的处理函数。这使得修改或验证用户输入变得简单。这就是我们拥有 handleChange 函数的原因。
• 由于在我们的表单元素上设置了 value 属性，因此显示的值将始终为 this.state.value，从而使 React 状态成为真实的来源。由于 handleChange 在每次击键时运行以更新 React 状态，因此显示的值将随着用户键入而更新。

由于他实际上并未提交表单，因此这是执行此操作的正确方法。但是，如果您要提交表单，请放弃动态链接并使用表单操作属性。

import React from 'react';
import { Link } from 'react-router-dom';

class App extends React.Component {
 /** Left some things in here commented out, 
     incase you start doing form submissions. Instead of a dynamic link.
  **/
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);

    /**  If you start submitting forms
    this.handleSubmit = this.handleSubmit.bind(this);  
    **/
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  /** If you start submitting forms, add onSubmit={this.onSubmit} to form action
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  } 
  **/

  render() {
    return (
    <div>
       <form className="form-inline">
                <div className="form-group">
                    <input type="text" value={this.state.value} onChange={this.handleChange} className="form-control" name="keyword" placeholder="Image keyword" />

                    <Link to={`/search/${this.state.value}`}>
                        <button className="btn btn-primary">Search</button>
                    </Link>
                </div>
            </form>
      </div>
    );
  }
}

export default App;