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

基本上，终于可以使用计算机为您提供帮助之后，我才意识到我的第一个回答是正确的。

您需要：

绑定handleChange方法。您在传递给React.createClass的对象中定义的所有方法将自动绑定到组件实例。
每个状态突变都将具有关联的处理程序功能。这使得修改或验证用户输入变得很简单。这就是为什么我们拥有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;

Answer 2

我认为您不应该使用Link包装提交按钮。但是您应该在e.preventDefault()中添加onSubmit()，以防止提交表单并阻止浏览器重定向/刷新。

您应该使用历史记录API（https://reacttraining.com/react-router/web/api/history）在onSubmit方法的末尾直接添加重定向

Answer 3

我一直在努力解决同样的问题。我正在使用React Router 4进行项目。到目前为止，我发现的是

这取决于您如何设置Route。
如果使用component属性来渲染诸如<Route to="/path" component={Name} />之类的组件，则该组件将具有数据（历史记录，位置和匹配项）
如果是这样，则可以使用输入值通过history.path等进行重定向。请参见下面的代码。
但是，如果使用render之类的<Route to="/path" render={()=> <Component />} />方法将数据传递给子组件，则呈现的组件将没有任何内容。

class Home extends Component {
  handleSubmit = e => {
    e.preventDefault();
    let teacherName = this.name.value;
    let teacherTopic = this.topic.value;
    let path = `teachers/${teacherTopic}/${teacherName}`;
    // this is the part !!!
    this.props.history.push(path);
  };

  render() {
    return (
      <div className="main-content home">
        <h2>Front End Course Directory</h2>
        <p>
          This fun directory is a project for the <em>React Router Basics</em> course on Treehouse.
        </p>
        <p>
          Learn front end web development and much more! This simple directory app offers a preview
          of our course library. Choose from many hours of content, from HTML to CSS to JavaScript.
          Learn to code and get the skills you need to launch a new career in front end web
          development.
        </p>
        <p>
          We have thousands of videos created by expert teachers on web design and front end
          development. Our library is continually refreshed with the latest on web technology so you
          will never fall behind.
        </p>
        <hr />
        <h3>Featured Teachers</h3>
        <form onSubmit={this.handleSubmit}>
          <input type="text" placeholder="Name" ref={input => (this.name = input)} />
          <input type="text" placeholder="Topic" ref={input => (this.topic = input)} />
          <button type="submit">Go!</button>
        </form>
      </div>
    );
  }
}

在我学习的过程中没有人提到它，真的很难理解这个小事实。无论如何，祝您编程愉快！

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

3 个答案: