如果我按下 App.tsx 上的编辑按钮，我想在 AddToto.tsx 的输入文本中显示数据。
如果您能告诉我使用什么方法，我将不胜感激。
这是 App.tsx
const App: React.FC = (props) => {
const [todos, setTodos] = useState<Todo[]>([]);
const [users, setUsers] = React.useState([] as Voca[]);
const editData = (id: number) => {
const item = users.find((user) => user.id === id);
console.log(item.word);
};
return (
<div className="App">
<h1>add word</h1>
<NewTodo onAddTodo={todoAddHandler} />
<hr />
<h1>edit word</h1>
<AddTodo />
<hr />
<table>
{users.map((user, index) => (
<tr key={index}>
<td>{user.word}</td>
<td>{user.meaning}</td>
<td>{user.enrollmentDate}</td>
<td>{user.editDate}</td>
<td className="opration">
<button onClick={() => removeData(user.id)}>delete</button>
</td>
<td>
<button
className="btn btn-warning"
onClick={() => {
editData(user.id);
}}
>
edit
</button>{" "}
</td>
</tr>
))}
</table>
</div>
);
};
export default App;
这是 AddTodo.tsx
class AddTodo extends Component {
render() {
return (
<form>
<div className="form-control">
<label htmlFor="word">word:</label>
<input type="text" id="word" />
<br />
<label htmlFor="todo-meaning">meaning:</label>
<input type="text" id="todo-meaning" />
</div>
<button type="submit">save</button>
</form>
);
}
}
export default AddTodo;
在这种情况下，我不知道如何将数据传递给另一个组件......
在 中editData，一旦找到该项目，就将作为道具传递给的 state 设置为AddTodo：
const [userBeingEdited, setUserBeingEdited] = useState<Voca | null>(null);
const editData = (id: number) => {
setUserBeingEdited(users.find((user) => user.id === id));
};
return (
// ...
<AddTodo userBeingEdited={userBeingEdited} />
// AddTodo.tsx
export default ({
userBeingEdited,
}: {
userBeingEdited: Voca | null,
}) => (
<form>
<div className='form-control'>
<label htmlFor='word'>word:</label>
<input type='text' id='word' defaultValue={userBeingEdited?.word} />
<br />
<label htmlFor='todo-meaning'>meaning:</label>
<input type='text' id='todo-meaning' defaultValue={userBeingEdited?.meaning} />
</div>
<button type='submit'>save</button>
</form>
);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句