Question

上下文

我有一个小应用程序，您基本上可以提交想法。它包含Home组件，该组件将状态变为现实。

用户可以通过React-Router Route访问的另一个组件，在那里他可以看到一个小表格并可以提交新的“想法”。

问题

我几次偶然发现了这个问题，现在我想解决它。我该如何提交此表单，返回到Home组件，该组件从表单中获取“标题”和“正文”，创建一个新的想法并使用新的想法设置状态（渲染）？

更多信息

在所说的家庭组件中，我已经添加了此功能：

addNewIdea = (title, body) => {
    const newIdea = { id: 2, title, body, claimed: false, likes: 0 }
    this.setState({
        ...this.state.ideas,
        newIdea
    })
}

我该怎么办？我不能直接将其传递给“ / new /路线吗？

那么，当用户在“ / new”路径上的表单上按“ submit”时，实际上应该发生什么？它应该重定向回主页（输入信息），并且“主页”组件应收到此消息并使用新的“想法”重新呈现。

我需要Redux还是与空白React一起使用？

NewIdea组件如下所示：

return (
        <div className="new-idea-container">
            <div className="new-idea-box">
                <h2 className="new-idea-title">Create a new IDEA</h2>
                <input className="new-idea-input-title" type="text" placeholder="Title" value={this.state.title} onChange={(e) => this.setState({ title: e.target.value })} />
                <div contentEditable className="new-idea-textarea" placeholder="Write a detailled Description of your IDEA" onChange={(e) => this.setState({ body: e.target.value })}>{this.state.body}</div>
                <div className="new-idea-btn-wrapper">
                    <input className="new-idea-submit-btn" type="submit" value="Submit" onClick={this.handleSubmitBtn} />
                    <Link className="new-idea-cancel-btn" to="/">
                        <input className="new-idea-cancel-btn" type="submit" value="Cancel" />
                    </Link>
                </div>
            </div>
        </div>
    )

只是一个链接，当用户单击“提交”按钮时，该链接将使用户返回。

这是我的路线：

render() {
return (
  <Router>
    <div>
      <Route exact path="/" component={Home} />
      <Route exact path="/new" component={NewIdea} />
    </div>
  </Router>
);
}

我要实现的另一个示例：

想象一下，我有一个Home组件，该组件具有一组想法（对象）。现在如果没有React Router，我会这样做。

创建一个新的组件AddIdea-作为道具传递了一个回调函数（来自addNewIdea之上的那个）。现在，子组件AddIdea从用户那里获取标题和正文，并且在单击“提交”后，我从props运行该函数，这将更新父组件中的状态。

但是我不能在React Router中做到这一点。至少我不知道，所以我想问一下，也许还有其他方法。必须有吧？

这是整个项目：https://github.com/dhuber666/Ideas

如何将函数传递给具有表单的路由，该表单在提交后运行并在先前的Route中设置状态？

0 个答案: