Stack Overflow em Português Asked by Beatriz Cibele on September 26, 2021
Estou fazendo um app todo list, e gostaria que ao clicar no botão edit o conteúdo aparecesse no campo onde adiciono meu novo item.
Mas a ação do botão e o estado são componentes irmãos.
AddTodo (como passo o estado da AddTodo para a Todo ?)
import React, { Component } from "react";
export default class AddTodo extends Component {
state = {
content: ""
};
handleChange = e => {
this.setState({ content: e.target.value });
};
handleSubmit = e => {
e.preventDefault();
this.props.addTodo(this.state);
this.setState({ content: "" });
};
// Como passar o estado dessa função ?
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label class="blue-text">Add new todo</label>
<input
type="text"
onChange={this.handleChange}
value={this.state.content}
/>
</form>
</div>
);
}
}
Todo
import React from "react";
import "./style.css";
const Todos = ({ todos, deleteTodo }) => {
const todoList = todos.length ? (
todos.map(todo => {
return (
<div className="collection-item" key={todo.id}>
<span
onClick={() => {
deleteTodo(todo.id);
}}
>
{todo.content}
</span>
<button
class="btn-small orange lighten-1 right"
id="btnEdit"
onClick={() => {editTodo(todo.content)}}
>
<i class="material-icons">edit</i>
</button>
</div>
);
})
) : (
<p className="center">Nothing todo, yay</p>
);
return <div className="todos collection">{todoList}</div>;
};
export default Todos;
App
import React, { Component } from "react";
import Todos from "./Todos";
import AddTodo from "./AddTodo";
export default class App extends Component {
state = {
todos: [
{ id: 1, content: "learning Redux" },
{ id: 2, content: "buy some milk" },
{ id: 3, content: "play Mario kart" }
]
};
deleteTodo = id => {
const todos = this.state.todos.filter(todo => {
return todo.id !== id;
});
this.setState({ todos });
};
addTodo = todo => {
todo.id = Math.random();
const todoss = [...this.state.todos, todo];
this.setState({ todos: todoss });
};
render() {
return (
<div className="todo-app container">
<h1 className="center blue-text">Todo list</h1>
<Todos todos={this.state.todos} deleteTodo={this.deleteTodo} />
<AddTodo addTodo={this.addTodo} />
</div>
);
}
}
Essa é uma forma de programar um elo entre componentes onde os mesmo compartilham dos mesmo dados e quando o botão incrementa ou decrementa são clicados a ação se programa para mostrar a variável de estado count
nos que estão com essa variável do Context
, exemplo:
const GlobalContext = React.createContext();
function GlobalProvider({children}) {
const [count, setCount] = React.useState(0);
const handleIncrement = () => setCount(count + 1);
const handleDecrement = () => setCount(count - 1);
return (
<GlobalContext.Provider value={{count, handleIncrement, handleDecrement}}>
{children}
</GlobalContext.Provider>
)
}
function Score() {
const { count, handleIncrement, handleDecrement } = React.useContext(GlobalContext);
return (<div>
<div>{count}</div>
<button onClick={handleIncrement}>Incremento</button>
<button onClick={handleDecrement}>Decremento</button>
</div>);
}
function Actions() {
const { count } = React.useContext(GlobalContext);
return (<div>{count}</div>);
}
function App() {
return (
<GlobalProvider>
<Score />
<Actions/>
</GlobalProvider>
)
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>
nesse código exemplo é criado um contexto com React.createContext();
e logo na próxima linha uma função para facilitar a criação do seu Provider
e por fim dentro do <App />
foi envolvido dois componentes que compartilharam funções e dados desse Provider
.
Answered by novic on September 26, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP