我正在关注React Redux 教程的用法。我真正不明白的是如何检索用户输入。
他们构建了一个 FilterLink 容器,其 mapDispatchToProps 是
const mapDispatchToProps = (dispatch, ownProps) => {
return {
onClick: () => {
dispatch(setVisibilityFilter(ownProps.filter))
}
}
}
因此它将自己的Props.filter 注入到连接的展示组件中。如果我们去看看这个容器是如何构建的
const Footer = () => (
<p>
Show:{" "}
<FilterLink filter="SHOW_ALL">All</FilterLink>{", "}
<FilterLink filter="SHOW_ACTIVE">Active</FilterLink>{", "}
<FilterLink filter="SHOW_COMPLETED">Completed</FilterLink>
</p>
)
好的,有“过滤器”属性。这很清楚。
现在我想在同一个例子上构建一个文本过滤器。所以首先这里是我的展示组件
const TodoSearch = ({onSubmit}) => (
<form
onSubmit={e => {
e.preventDefault()
onSubmit()
}}
>
<input placeholder="Text search" />
<input type="submit" value="Go" />
</form>
)
但是当我来编写容器时,我不知道如何获取用户输入
const mapDispatchToProps = (dispatch) => {
return {
onSubmit: () => {
dispatch(setTextSearch(????))
}
}
}
这是我会用 jQuery $(#text).val() 做的事情,但是......这是最好的方法吗?
稍后在同一个教程中,他们构建了一个小表单以将待办事项添加到列表中。好的,让我们去看看他们是如何捕捉输入的。
let AddTodo = ({ dispatch }) => {
let input
return (
<div>
<form onSubmit={e => {
e.preventDefault()
if (!input.value.trim()) {
return
}
dispatch(addTodo(input.value))
input.value = ''
}}>
<input ref={node => {
input = node
}} />
<button type="submit">
Add Todo
</button>
</form>
</div>
)
}
等等,这里的魔法在哪里?他们是否使用该 ref 技巧将值注入“输入”变量中?那是对的吗?因此,如果有 20 个输入字段,我是否必须使用 20 个变量和 20 个不同的引用?
任何帮助表示赞赏,谢谢