react-router – React Router v4 for Form

发布时间：2020-12-15 20:15:09 所属栏目：百科来源：网络整理

导读：我该如何使用 Link使用 form？我试图避免编程路由,因为我看到许多警告反对它. 表格有两个字段： form input type="text" id="what"/ input type="text" id="where"/ Linkbutton type="submit"/Link/form 我的目标是将页面发送到’/’document.getElementById

我该如何使用< Link>使用< form>？我试图避免编程路由,因为我看到许多警告反对它.

表格有两个字段：

<form>
    <input type="text" id="what"/>
    <input type="text" id="where"/>
    <Link><button type="submit"></Link>
</form>

我的目标是将页面发送到’/’document.getElementById(‘where’).value’/’document.getElementById(‘what’).value,是否可以使用v4路由器？

解决方法

使用v4,< Link>仅用于创建< a>元素.

我认为大多数针对程序化导航的警告来自人们并不真正理解历史是如何工作的,特别是在尝试在组件之外进行时. withRouter HOC提供了一种向组件添加路由的简便方法.

另外,我会从表单组件而不是按钮中进行路由.然后,您只需要确保按钮的类型是提交(这是默认值).

您还使用DOM函数来访问代码中的值.我建议改为使用受控输入,但这显然取决于你.

class NavForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      what: '',where: ''
    }

    this.submitHandler = this.submitHandler.bind(this)
    this.handleInput = this.handleInput.bind(this)
  }

  handleInput(event) {
    const target = event.target
    this.setState({
      [target.name]: target.value
    })
  }  

  submitHandler(event) {
    event.preventDefault()
    // do some sort of verification here if you need to
    this.props.push(`${this.state.where}/${this.state.what}`)
  }

  render() {
    return (
      <form onSubmit={this.submitHandler}>
        <input
          type='text'
          name='what'
          value={this.state.what}
          onChange={this.handleInput} />
        <input
          type='text'
          name='where'
          value={this.state.where}
          onChange={this.handleInput} />
        <button>Submit</button>
      </form>
    )
  }
}

export default withRouter(NavForm)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!