Javascript 如何为创建按钮的每个组件提供不同的id称为

所以问题是我无法为我创建的按钮提供唯一的

id

。我当前提供

id

的代码是每次调用组件时增加一个

count

变量，然后将其分配给按钮，但所有按钮的

id

始终以当前计数结束。我将使用

id

作为删除数组中特定元素的基础。任何其他方法都将不胜感激

以下是创建按钮的组件：

class TodoListItem extends React.Component {
  constructor(props) {
    super(props);
    this.onDelete = this.onDelete.bind(this);
    this.arrTodos = this.props.todos;
  }
  onDelete(e) {
    let btnDel = ReactDOM.findDOMNode(this.refs.btnDel);
  }
  render() {
    return (
      <div>
        <li>
          {this.props.desc}
          <span>    </span>
          <input ref="btnDel" type='submit' id={this.props.btnID} value='Delete' onClick={this.onDelete} />
        </li>
      </div>
    );
  }
}

类ToDolitItem扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onDelete=this.onDelete.bind（this）；
this.arrTodos=this.props.todos；
}
删除（e）{
让btnDel=ReactDOM.findDOMNode（this.refs.btnDel）；
}
render（）{
返回(

{this.props.desc}

);
}
}

这是主要课程：

class Todolist extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [],
      btnID: -1
    };
    this.onSubmit = this.onSubmit.bind(this);
    this.createTodo = this.createTodo.bind(this);
    this.todos = {};
    this.todoID = 0;
  }
  onSubmit(e) {
    let value = this.refs.myInput.value;
    let myInput = ReactDOM.findDOMNode(this.refs.myInput);
    if (value == "") {
      myInput.focus();
      return;
    } else {
      let newTodo = {
        idTodo: this.todoID,
        desc: value,
        done: false
      };
      this.todos = newTodo;
      this.setState({
        todos:[...this.state.todos,newTodo],
        btnID: this.state.btnID + 1
      });
      myInput.value = "";
      myInput.focus();
      this.todoID++;
    }
  }
  onInput(e) {
    this.setState({text: e.target.value});
  }
  createTodo(todo) {
    return <TodoListItem key={todo.idTodo} todos={this.state.todos} desc={todo.desc} btnID={this.state.btnID} />
  }
  render() {
    return(
      <div>
        <input ref="myInput" placeholder="What To Do?" />
        <input type="submit" onClick = {this.onSubmit} />
        <ul>{this.state.todos.map(this.createTodo)} </ul>
      </div>
    );
  }
};

类Todolist扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
待办事项：[]，
btnID:-1
};
this.onSubmit=this.onSubmit.bind（this）；
this.createTodo=this.createTodo.bind（this）；
this.todos={}；
this.todoID=0；
}
提交（e）{
让value=this.refs.myInput.value；
让myInput=ReactDOM.findDOMNode（this.refs.myInput）；
如果（值==“”）{
myInput.focus（）；
返回；
}否则{
设newTodo={
idTodo:this.todoID，
描述：价值，
完成：错误
};
this.todos=newTodo；
这是我的国家({
todos:[…this.state.todos，newTodo]，
btnID:this.state.btnID+1
});
myInput.value=“”；
myInput.focus（）；
这个.todoID++；
}
}
输入（e）{
this.setState（{text:e.target.value}）；
}
创建todo（todo）{
返回
}
render（）{
返回(
{this.state.todos.map（this.createTodo）}
);
}
};

不确定您需要id做什么，但是当您进行

映射时，也只需传递迭代器，这样您就可以

this.state.todos.map(function(todo, i){
  this.createTodo(todo, i);
}.bind(this));

然后在
createTodo
中，您可以使用
i
作为
键和
id
 我不想传递todo的ID，而是想将remove方法作为道具传递，因为todo已经绑定到位

removeTodo: function(target) {
  const { todos } = this.state;

  this.setState({
    todos: todos.filter(todo => todo !== target)
  });
}

然后，您可以部分应用要传递给组件的函数版本

createTodo(todo) {
  const remove = this.removeTodo.bind(this, todo);

  return <TodoListItem key={todo.idTodo} todos={this.state.todos} desc={todo.desc} remove={remove} />
}

createTodo（todo）{
const remove=this.removeTodo.bind（this，todo）；
返回
}

然后在组件内部，当您想要删除它时，您可以简单地调用remove函数

<input type='submit' value='Delete' onClick={this.props.remove} />


旁注：请检查添加随机问候语是否是个好主意。感谢您的回答：D感谢您的回答：D，由于您的回答，我了解到方法也可以作为道具传递，我认为值是唯一可以传递的XD