使用React自定义Web聊天机器人的用户界面

Question

我正在做一个项目，我在Azure中安装了一个Bot，我正试图使用React自定义网络聊天UI，当用户输入"；安排会议"；显示了一个react组件，它允许用户在表单中输入详细信息。在提交表单时，数据被发送到机器人。

我已经看到这可以通过使用Redux中间件和一个名为useSendPostBack的钩子来解决。但是，由于我是React的新手，有人能指导我如何实现这一点，以及useSendPostBack钩子是如何工作的，以及我的echo bot是如何接收它的吗？

谢谢你的帮助。

Answer 1

useSendPostBack是一个钩子，因此必须在组件中调用它。可能有一种方法可以通过Redux中间件发送提交，但不会使用这个钩子。

钩子规则还要求您不能有条件地调用钩子，因此它必须是您在某些组件(如FormSubmitted(的顶层调用的东西，只有当表单准备好提交时才能呈现。

一般建议你不要把表单状态放在Redux中，但这样做不会破坏任何东西。你可以使用react Redux中的useSelector钩子来从Redux中获取表单状态。

我不熟悉BotFramework。可能有一种更好的方法可以通过回调函数而不是钩子来实现这一点。但您所描述的——在Redux中存储表单状态并通过useSendPostBack提交给bot——可能看起来像这样。

const FormSubmitted = () => {
// Get form data out of Redux
const formData = useSelector(state => state.someProperty);
// Send to bot
useSendFormBack(formData);
// I'm not sure how you access the success/failure from the bot
return (
<div>Submitting Form...</div>
)
}
const FormPage = () => {
const [didSubmit, setDidSubmit] = useState(false);

return didSubmit
? <FormSubmitted/> 
: <FormFields onSubmit={() => setDidSubmit(true)}/>
}

FormFields是用户编辑表单字段的某个组件。

如果没有Redux，您可能希望将提交表单的状态存储在FormPage中。

// Now form data comes from props
const FormSubmitted = ({formData}) => {
// Send to bot
useSendFormBack(formData);
// I'm not sure how you access the success/failure from the bot
return (
<div>Submitting Form...</div>
)
}
const FormPage = () => {
// Store the whole data object, or null if not submitted
const [submittedData, setSubmittedData] = useState(null);

// FormSubmitted gets the data as a prop
// FormFields calls the onSubmit function with the its data as the argument
return submittedData !== null
? <FormSubmitted formData={submittedData}/>
: <FormFields onSubmit={(data) => setSubmittedData(data)}/>
}