javascript - 如何在反应中将功能传输到功能组件
问题描述
我在 react 和 typescript 方面有点新,并且在将函数从文件传输App.tsx
到名为WordAddingForm.tsx
THANKS IN ADVANCE 的功能组件时遇到了一些问题!
所以这是我的App.tsx
文件:
import React, {FC, useState} from 'react';
import WordAddingForm from './components/WordAddingForm';
import {observer} from "mobx-react-lite";
import WordService from "./services/WordService"
const App: FC = () => {
const {store} = useContext(Context)
const [words, setWords] = useState<IWord[]>([])
async function getWords() {
try {
const response = await WordService.fetchWords()
setWords(response.data)
} catch (e) {
console.log(e)
}
}
return (
<div>
<div><WordAddingForm/></div>
</div>
)
}
export default observer(App);
我需要将功能传输getWords
到组件这是我的WordAddingForm.tsx
文件:
import React, {FC, useContext, useState} from 'react';
import {Context} from "../index";
import {observer} from "mobx-react-lite";
import WordService from '../services/WordService';
const WordAddingForm: FC = () => {
const [word, setWord] = useState<string>('')
const [wordT, setWordT] = useState<string>('')
const [instance, setInstance] = useState<string>('')
const [instanceT, setInstanceT] = useState<string>('')
const {store} = useContext(Context)
function clear():void {
setWord('')
setWordT('')
setInstance('')
setInstanceT('')
}
async function createWord(word:string, wordT:string, instance:string, instanceT:string) {
try {
const response = await store.createWord(word, wordT, instance, instanceT)
console.log(response)
clear()
} catch (e) {
console.log(e)
}
}
return (
<div>
<input
onChange={e => setWord(e.target.value)}
value={word}
type="text"
placeholder="word"
/>
<input
onChange={e => setWordT(e.target.value)}
value={wordT}
type="text"
placeholder="word translation"
/>
<input
onChange={e => setInstance(e.target.value)}
value={instance}
type="text"
placeholder="instance of using this word"
/>
<input
onChange={e => setInstanceT(e.target.value)}
value={instanceT}
type="text"
placeholder="instance translation"
/>
<button
onClick={() => {
createWord(word, wordT, instance, instanceT)
clear()
}}>
add word +
</button>
</div>
)
}
export default observer(WordAddingForm)
而且我需要传输功能getWords
以<WordAddingForm/>
在此组件中使用它并在向数据库添加新单词后再次更新单词列表喜欢<WordAddingForm props={getWords}/>
或<WordAddingForm {getWords}/>
没有帮助
解决方案
<WordAddingForm getWords={getWords} />
这就是你将它传递给你的组件的方式。使用 insideWordAddingForm
时,必须通过参数接收 props 对象:
interface Props {
getWords: () => Promise<any>
}
const WordAddingForm: FC<Props> = (props) => {
// use your function as props.getWords()
}
推荐阅读
- kendo-ui-angular2 - 对话服务内容中的换行符被忽略
- c# - 在日期、小时和分钟之间迭代
- node.js - 在第二个计划中制作节点检查文件
- powershell - 如果程序存在卸载
- ios - 如何将 UILabel 添加到 UICollectionView 控制器
- xml - XSLT:当“n”被赋予另一个属性的值时,重复输出值 n 次
- java - 如何在流中查找字符串数组的值
- heroku - 由于缺少导入程序,Keystone.js 应用程序在 Heroku 上启动失败?
- linkedin - 使用 LinkedIn V2 API 使用视频资产创建 UGC 帖子
- python - 如何总结不同的groupby组合?