javascript - 如何根据索引 React 为选定元素赋值?
问题描述
预期效果:点击<li> </ li>
-> 取索引 li -> 共享index
并this.state.todos
在组件中-> 在从数组中选择元素clock
的基础上-> 将返回的值赋给被选择的元素---> 从数组中选择一个粘性元素 ->为其分配一个不同的随机值 -> 单击前一个元素 ---> 显示我为其分配的值。在我拥有的控制台中是未定义的。当我在索引之间切换时不会改变。寻求一些建议。index
Math.random ()
selectState
<li>
this.sate.select 移动到组件“时钟”并分配给 this.state.selectTodo
应用程序
class App extends React.Component {
constructor() {
super();
this.state = {
withInitialTodos: true,
selec: null,
todos: [
{
time: '00:00:10',
description: 'Hello'
},
{
time: '00:00:20',
description: 'World'
}
],
todo: {
'time': '00:00:30',
'description': 'W'
},
selectTodo: {
"times": [{ 'time': '00:00:40' }, { 'time': '00:00:50' }],
"description": " ytytyty",
"id": 3,
"title": "gfgfgfgfgf"
},
saveTodo: {
"time": '03:03:03'
}
};
}
selectTodo = (index) => {
this.setState({
selec: index
})
}
createTodo = (todo) => {
this.setState({
withInitialTodos: false,
todos: [].concat(this.state.todos, this.state.todo),
selectTodo: {
...this.state.selectTodo,
times: [].concat(
this.state.selectTodo.times,
this.state.withInitialTodos ? this.state.todos.map(({ time }) => ({ time })): [],
{
time: this.state.todo.time
}
)
}
});
}
saveTodo = (description) => {
const todo = {
description,
time: '03:03:03'
};
const todos = [].concat(this.state.todos, todo);
this.setState({
todos
});
}
render() {
console.log(this.state.todos);
console.log(this.state.selectTodo);
console.log(this.state.selec);
console.log("sdsd " + this.state.todos[this.state.selec])
return (
<div>
<ul>
{
this.state.todos
.map((todo, index) =>
<Todo
key={index}
index={index}
todo={todo}
selectTodo ={this.selectTodo}
/>
)
}
</ul>
<button onClick={this.createTodo}>Add</button>
<Clock
todos={this.state.todos}
selec={this.state.selec}
/>
</div>
);
}
}
去做
class Todo extends Component {
render () {
{console.log(this.props.todo)};
return (
<li onClick={()=> this.props.selectTodo(this.props.index)}>
{this.props.todo.description}
</li>
)
}
}
export default Todo;
钟
class Clock extends Component {
constructor() {
super()
this.state = {
selectTodo: [],
clock: Math.random()
}
}
componentDidMount() {
this.setState({
selectTodo: this.props.todos[this.props.selec]
})
}
render() {
return (
<div>
{this.state.selectTodo = this.state.clock}
</div>
);
}
}
解决方案
你的方法不正确。您需要根据它们的行为(它们应该做什么)来理解和分离组件。并且 state 和 props 是从上到下传递的。牢记这一点将有助于构建组件层次结构。在这种情况下,Todo 组件上的 selectTodo 函数应该添加随机时钟值,因为它是该逻辑的最理想位置,如果要显示先前随机数或时间的列表,时钟不需要知道任何内容。您只需要传递选定的组件,它就会呈现这些信息。你可以像这样重构你的代码:
class App extends React.Component {
state = {
todos: [
{ id: 0, times: ["00:00:10"], description: "some desc" },
{ id: 1, times: ["00:00:20"], description: "some desc1" }
],
selectedIndex: null
};
createTodo = todo => {
/**
* Create Todo Logic
*/
}
selectTodo = index => {
let newTodos = [...this.state.todos]
let newTime = Math.random();
newTodos[index].times.push(newTime);
this.setState({todos: newTodos, selectedIndex: index});
}
render() {
<div>
<ul>
{
this.state.todos.map((todo, index) => (
<Todo
key={todo.id}
description={todo}
onSelectTodo={() => this.selectTodo(index)}
/>
))
}
</ul>
<Watch
todo={this.state.todos[this.state.selectedIndex]}
/>
</div>
}
}
如果您不明白这里的任何内容,请随时提出问题。
推荐阅读
- python - 每两列的总和,并在熊猫数据框中留下一列
- javascript - 我无法将 localStorage 字符串解析为 JSON 对象
- ruby-on-rails - 使用 Ruby on Rails - Watir 不会输入用户名、密码或单击登录按钮
- python - 在 Docker 容器中使用 Python multiprocessing.Process
- google-chrome - 是否可以在扩展程序未激活的站点上隐藏扩展程序工具栏中的扩展程序图标?
- arduino - 程序仅在连接到 PC 时有效
- android - 如何在android中同时录制耳机扬声器(内部音频)和麦克风的音频
- javascript - blazor 服务器端可调整大小和可拖动的自定义对话框
- javascript - laravel livewire 在组件之间传递数据
- amazon-web-services - 如何将 Cloudfare ssl 证书设置到 AWS EC2 NGINX 服务器?