Javascript 如何根据选定元素的索引为其指定值？

预期效果：点击

->获取索引li->共享

索引

并

在组件
时钟
->中根据
索引
从数组中选择元素->将
Math.random（）
-->从数组中选择一个粘合元素->为其指定一个不同的随机值->单击上一个元素->为其显示指定的值。
在控制台中，我从
选择的状态
未定义。
当我在
之间切换时，索引不会改变。征求一些意见

this.sate.selec移动到组件“clock”并分配给该.state。选择Todo

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 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>
    );
  }
}

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
withInitialTodos:true，
selec:null，
待办事项：[
{
时间：“00:00:10”，
描述：“你好”
},
{
时间：“00:00:20”，
描述：“世界”
}
],
待办事项：{
“时间”：“00:00:30”，
“说明”：“W”
},
选择待办事项：{
“时报”：[{'time'：'00:00:40'}，{'time'：'00:00:50'}]，
“说明”：“YTY”，
“id”：3，
“标题”：“GFGF”
},
saveTodo：{
“时间”：“03:03:03”
}
};
}
选择TODO=（索引）=>{
这是我的国家({
selec：索引
})
}
createTodo=（todo）=>{
这是我的国家({
withInitialTodos:false，
todos:[].concat（this.state.todos，this.state.todo），
选择待办事项：{
…this.state.selectTodo，
泰晤士报：[]康卡特(
this.state.selectTodo.times，
this.state.withInitialTodos？this.state.todos.map（（{time}）=>（{time}））：[]，
{
时间：this.state.todo.time
}
)
}
});
}
saveTodo=（说明）=>{
常数todo={
描述
时间：03:03:03
};
const todos=[].concat（this.state.todos，todo）；
这是我的国家({
待办事项
});
}
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]）
返回(

{
这个是。state。todos
.map（（待办事项，索引）=>
)
}

添加
);
}
}

待办事项

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;

类Todo扩展组件{
渲染（）{
{console.log（this.props.todo）}；
返回(
this.props.selectTodo（this.props.index）}>
{this.props.todo.description}

)
} 
}
导出默认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={
选择待办事项：[]，
时钟：Math.random（）
}
}
componentDidMount（）{
这是我的国家({
选择TODO:this.props.todos[this.props.selec]
})
}
render（）{
返回(
{this.state.selectTodo=this.state.clock}
);
}
}

演示：
您的方法不正确。您需要根据组件的行为（它们应该做什么）来理解和分离组件。状态和道具从上到下传递。记住这一点将有助于构建组件层次结构。在这种情况下，Todo组件上的selectTodo function应该添加随机时钟值，因为它是该逻辑的最理想位置，并且如果要显示以前的随机数或时间列表，时钟不需要知道任何信息。您只需传递选定的组件，它就会呈现这些信息。您可以像这样重构代码：

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>
  }
}

类应用程序扩展了React.Component{
状态={
待办事项：[
{id:0，times:[“00:00:10”]，description:“some desc”}，
{id:1，times:[“00:00:20”]，description:“some desc1”}
],
selectedIndex:null
};
createTodo=todo=>{
/** 
*创建待办事项逻辑
*/
}
选择TODO=index=>{
让newTodos=[…this.state.todos]
设newTime=Math.random（）；
newTodos[index].times.push（newTime）；
this.setState（{todos:newTodos，selectedIndex:index}）；
}
render（）{

{
this.state.todos.map（（todo，index）=>(
这个。选择TODO（索引）}
/>
))
}

}
}

如果您不懂这里的任何内容，请随时提问。
您的问题不太清楚。从我对高级流程的理解来看。用户单击“选择待办事项”应为待办事项分配一个随机时钟值是否正确？@ShivaPandey PandeyYes。当我点击todo1——分配随机时钟值；当我单击todo2-->指定随机时钟值时。当我再次单击todo1显示previus值并将新的随机时钟值添加到列表SSO时，我的想法是显示用户选择todo的次数。并显示所有过去的时钟时间。？