如何将<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路由器?
答案 0 :(得分:9)
使用v4时,<Link>
仅用于创建<a>
元素。
我认为大多数针对程序化导航的警告来自人们并不真正理解history
的工作原理,尤其是在尝试在组件之外进行操作时。 withRouter
HOC提供了一种向组件添加路由的简便方法。
此外,我会从表单组件而不是按钮进行路由。然后,您只需要确保按钮的类型为submit
(这是默认值)。
您还使用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)